这是一款使用jquery和css3制作的炫酷汉堡包按钮变形动画特效。这组特效共12种动画效果,分别是在用户点击汉堡包按钮之后,汉堡包按钮以不同的方式执行变形动画。
使用方法
HTML结构
这组汉堡包按钮的HTML结构基本相似,都是使用一个<div>
元素来包裹3个<span>
元素。<span>
元素用于制作汉堡包按钮的三条线。
<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"); }); });
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!