插件描述：这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效。这组特效共12种动画效果，分别是在用户点击汉堡包按钮之后，汉堡包按钮以不同的方式执行变形动画。
图标按钮变形说明
这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效。这组特效共12种动画效果，分别是在用户点击汉堡包按钮之后，汉堡包按钮以不同的方式执行变形动画。
使用方法
HTML结构
这组汉堡包按钮的HTML结构基本相似，都是使用一个
元素来包裹3个元素。元素用于制作汉堡包按钮的三条线。
CSS样式
在style.css文件中，分别为这12中效果制定了变形动画的CSS3代码，例如第一种变形动画的CSS代码如下：#hamburger-1.is-active.line:nth-child(2){
opacity:0;
}
#hamburger-1.is-active.line:nth-child(1){
-webkit-transform:translateY(13px)rotate(45deg);
-ms-transform:translateY(13px)rotate(45deg);
-o-transform:translateY(13px)rotate(45deg);
transform:translateY(13px)rotate(45deg);
}
#hamburger-1.is-active.line:nth-child(3){
-webkit-transform:translateY(-13px)rotate(-45deg);
-ms-transform:translateY(-13px)rotate(-45deg);
-o-transform:translateY(-13px)rotate(-45deg);
transform:translateY(-13px)rotate(-45deg);
}
JavaScript
在用户点击汉堡包按钮时，使用jquery代码为该汉堡包按钮切换is-active class类。$(document).ready(function(){
$(".hamburger").click(function(){
$(this).toggleClass("is-active");
});
});
