html文字变成汉堡插件,一组超酷汉堡包图标变形动画特效

Hamburgers是一款效果超酷的汉堡包图标变形动画特效CSS3动画库。这组汉堡包图标动画包括18种不同的汉堡包变形动画效果，你还可以通过Sass文件来自定义你自己的汉堡包图标变形动画。

安装

你可以通过bower或npm来安装Hamburgers汉堡包变形动画。

bower install css-hamburgers

npm install hamburgers

使用方法

使用该汉堡包变形动画特效需要在页面中引入hamburgers.css文件

HTML结构

该汉堡包图标变形动画特效的HTML结构如下：

你也可以使用

然后你可以添加相应的class类来获取相应的汉堡包图标变形动画。

下面是所有你可以选择的汉堡包变形动画的class类。

hamburger--arrow

hamburger--arrow-r

hamburger--arrowalt

hamburger--arrowalt-r

hamburger--boring

hamburger--collapse

hamburger--collapse-r

hamburger--elastic

hamburger--elastic-r

hamburger--emphatic

hamburger--emphatic-r

hamburger--slider

hamburger--slider-r

hamburger--spin

hamburger--spin-r

hamburger--squeeze

hamburger--vortex

hamburger--vortex-r

带-r的class类表示的是不带-r class的动画的反向效果。

最后，要触发汉堡包图标变形动画，还需要添加一个is-active class类。

小技巧

在使用Hamburger作为菜单按钮时，建议使用ARIA属性。

aria-label="Menu" aria-controls="navigation">

如果你使用的是

aria-label="Menu" role="button" aria-controls="navigation">