hamburgers指南攻略
官方网址:https://jonsuh.com/hamburgers
GitHub:https://github.com/jonsuh/hamburgers
简介描述:超酷图标变形动画特效
Hamburgers是一款效果超酷的图标变形动画特效CSS3动画库。包括18种不同的变形动画效果,你还可以通过Sass文件来自定义你自己的图标变形动画。
安装
你可以通过bower或npm来安装Hamburgers变形动画。
bower install css-hamburgers
npm install hamburgers
需要在页面中引入hamburgers.css文件使用方法
<link href="dist/hamburgers.css" rel="stylesheet"></link>
HTML结构如下:
<button class="hamburger" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>
你也可以使用<div>来代替按钮元素。
<div class="hamburger" type="button">
<div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</div>
然后你可以添加相应的class类来获取相应的图标变形动画。
<button class="hamburger hamburger--collapse" type="button">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</button>