按钮图标
12种炫酷汉堡包图标按钮变形动画特效
PetitQ
这是一款使用 jquery 和 css3 制作的炫酷汉堡包按钮变形动画特效。这组特效共 12 种动画效果，分别是在用户点击汉堡包按钮之后，汉堡包按钮以不同的方式执行变形动画。
HTML 结构：
这组汉堡包按钮的 HTML 结构基本相似，都是使用一个
也想出现在这里？联系我们吧
元素来包裹 3 个元素。元素用于制作汉堡包按钮的三条线。
<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 代码如下：
#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");
});
});
| 演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务，详询在线客服！
也想出现在这里？联系我们吧
相关文章
热销模板
本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务！
登录