3种超酷汉堡包菜单按钮变形动画特效

当前位置:主页 > CSS3库 > CSS3动画 > 3种超酷汉堡包菜单按钮变形动画特效
3种超酷汉堡包菜单按钮变形动画特效
分享:

    插件介绍

    这是一款使用CSS3和少量jQuery代码来完成的汉堡包菜单按钮变形动画特效。该特效使用CSS3 transition 和 transform 来完成变形动画效果,使用jQuery来触发按钮点击事件。

    浏览器兼容性

    浏览器兼容性
    时间:08-05
    阅读:
简要教程

这是一款使用CSS3和少量jQuery代码来完成的汉堡包菜单按钮变形动画特效。该特效使用CSS3 transition 和 transform 来完成变形动画效果,使用jQuery来触发按钮点击事件。

HTML结构

该汉堡包按钮的HTML结构非常简单,使用嵌套<div>的HTML结构。

<div class="burgers">
  <div class="burger1 menu">
      <div class="icon"></div>
  </div>

  <div class="burger2 menu">
      <div class="icon"></div>
  </div>

  <div class="burger3 menu">
      <div class="icon"></div>
  </div>
</div>
                
CSS样式

作为汉堡包菜单按钮的包裹容器div.menu元素设置了固定的宽度和高度,定位方式为相对定位,显示方式display为内联块级元素。并设置1秒钟的过渡动画时间。

.menu {
  width: 80px;
  height: 80px;
  position: relative;
  transition-duration: 1s;
  display: inline-block;
  margin: 40px;
  cursor: pointer;
}
                

.icon元素是汉堡包菜单按钮,它的:before:after伪元素分别用于制作上下两条横线。

.icon {
  height: 14px;
  width: 80px;
  top: 30px;
  background-color: #F8FFE9;
  border-radius: 20px;
  position: absolute;
  transition-duration: 0.5s;
}
.icon:before {
  left: 0;
  position: absolute;
  top: -25px;
  height: 14px;
  width: 80px;
  background-color: #F8FFE9;
  content: "";
  border-radius: 20px;
  transition-duration: 0.5s;
}
.icon:after {
  left: 0;
  position: absolute;
  top: 25px;
  height: 14px;
  width: 80px;
  background-color: #F8FFE9;
  content: "";
  border-radius: 20px;
  transition-duration: 0.5s;
}                  
                

当汉堡包按钮被点击的时候,容器元素被使用jQuery来添加.openburger1-open class类,3种汉堡包菜单按钮此时会分别使用transitiontransform来制作不同的动画。

.burger2.open .icon {
  transition-duration: 0.1s;
  transition-delay: 0.5s;
  background: transparent;
}

.burger2.open .icon:before {
  transition: top 0.5s, transform 0.5s 0.5s;
  top: 0px;
  transform: rotateZ(-45deg);
}

.burger2.open .icon:after {
  transition: top 0.4s, transform 0.5s 0.5s;
  top: 0px;
  transform: rotateZ(45deg);
}

.burger3.open .icon {
  background: transparent;
}

.burger3.open .icon:before {
  transition: transform 0.5s;
  transform: rotateZ(45deg) translate(15px, 20px);
}

.burger3.open .icon:after {
  transition: transform 0.5s;
  transform: rotateZ(-405deg) translate(15px, -20px);
}                  
                
JavaScript

特效中使用jQuery代码来在点击按钮是切换相应的class类。

$(document).ready(function(){
    $(".burger1").click(function(){
        $(".burger1").toggleClass("burger1-open");
    })

    $(".burger2").click(function(){
      $(".burger2").toggleClass("open");
    })

    $(".burger3").click(function(){
      $(".burger3").toggleClass("open");
    })
})