在线下单

淘宝网拍付下单(拍付下单之后请及时联系客服排单)

店铺地址 https://sminer.taobao.com/

拍付链接 http://t.cn/R34uWQU

12种炫酷汉堡包图标按钮变形动画特效

分类:插件代码 更新时间:2018-06-27 浏览次数:649

代码简介

这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效。这组特效共12种动画效果,分别是在用户点击汉堡包按钮之后,汉堡包按钮以不同的方式执行变形动画。

浏览器兼容

Chrome、 Opera、 Safari、Opera、IE10+

使用方法

1. html:

<divclass="hamburger"id="hamburger-1">
    <spanclass="line"></span>
    <spanclass="line"></span>
    <spanclass="line"></span>
</div>


2. 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);
}  


3. js:

$(document).ready(function(){
  $(".hamburger").click(function(){
    $(this).toggleClass("is-active");
  });
});

问题反馈

  • 问题内容

  • 问题附件

  • 您的称呼

    联系方式

提交成功

您的问题已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!

发票受理

提交成功

您的发票受理请求已成功提交,我们工作人员将于1个工作日之内与您联系处理。
谢谢您的支持!