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

图标 变形动画 汉堡包按钮 2016-11-08

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

支持IE10+

演示下载 1743
使用方法

使用方法

HTML结构

这组汉堡包按钮的HTML结构基本相似,都是使用一个<div>元素来包裹3个<span>元素。<span>元素用于制作汉堡包按钮的三条线。

1
2
3
4
5
<div class="hamburger" id="hamburger-1">
    <span class="line"></span>
    <span class="line"></span>
    <span class="line"></span>
</div>
CSS样式

在style.css文件中,分别为这12中效果制定了变形动画的CSS3代码,例如第一种变形动画的CSS代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#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类。

1
2
3
4
5
$(document).ready(function(){
  $(".hamburger").click(function(){
    $(this).toggleClass("is-active");
  });
});         

本文转载请注明出处:http://www.zhuiye.com/detail_6.html
评论区
  • 还没有评论,快来抢沙发吧!