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

所属分类:输入,其他-定制和风格,动画效果

 8200  94  查看评论 (4)
12种汉堡包图标按钮变形动画特效 ie兼容10

图标按钮变形说明

这是一款使用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");
  });
});


相关插件-定制和风格,动画效果

CSS3打造的漂亮的动画按钮-ANIMATED BUTTONS

ANIMATED BUTTONS 室用css3打造的一款多种动画样式的按钮,它的灵感来自于作者想用不同的样式创造一些动态的链接元素,鼠标移动到按钮上和激活按钮都呈现不同的样式。
  定制和风格
 16063  73

模拟linux桌面的WEB界面-JQUERY DESKTOP

JQUERY DESKTOP 为我们提供了一个类似linux桌面的web界面,这将给网站后台带来一个全新的界面和体验。JQUERY DESKTOP由3部分组成,即顶部菜单、桌面部分和底部菜单。其中用到了css的z-index属性来定位不同层次的元素,该插件将在IE6中失效,在IE7以上都能正常运行。
  定制和风格
 28212  79

jQuery单选框复选框美化插件cform.js

能够实现单选框复选框原本的选中、未选中、禁用,还能够设置选中和未选中的文本信息、标签的最小宽度等,简单实用,容易上手。
  定制和风格
 5313  24

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    SiriBen 0
    2017/6/29 9:17:28

    感谢楼主,这个分享很OK,大写加粗赞

    回复
    anglesky 0
    2017/3/20 17:35:27

    没怎么接触过CSS3,动画真的酷炫

    回复
    The And 0
    2016/11/29 19:11:05
    很不错的   很好 感谢作者分享 回复
    里昂没有青春 0
    2016/11/29 15:11:15
    很不错的  感谢作者分享 回复
取消回复