纯CSS3菜单汉堡包按钮变形动画特效

这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效。该特效共有9种不同的按钮变形动画效果，这些效果都是使用CSS3帧动画完成的，效果非常的酷。

制作方法

HTML结构

该按钮变形动画使用嵌套<div>的HTML结构。使用一个<section>元素作为包裹元素，里面放置一个div.menu作为按钮元素。它的里面有三个空的<div>元素用于制作汉堡包按钮的三条横线。

<section class="mod model-1">
  <div class="menu">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
  </div>
</section>          
              

CSS样式

首先为菜单和每个.bar元素设置一些基本样式，并使用transition来添加平滑的动画过渡效果。

.menu {
  height: 100px;
  width: 100px;
  position: relative;
  margin: auto;
  padding-top: 20px;
  border: 5px solid transparent;
  -moz-border-radius: 100%;
  -webkit-border-radius: 100%;
  border-radius: 100%;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.bar {
  height: 5px;
  width: 70px;
  display: block;
  margin: 10px auto;
  position: relative;
  background-color: #fff;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}             
              

在第一种按钮变形动画特效中，通过nth-of-type来选择各条汉堡包线条。对第一条使用mrotr帧动画，对第二条使用fade动画，对第三条使用mrotl帧动画。在鼠标滑过它们时，有分别修改它们的旋转角度和透明度。

.model-1 {
  background-color: #663399;
}
.model-1 .bar {
  position: absolute;
}
.model-1 .bar:nth-of-type(1) {
  top: 15px;
  -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
  -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  -webkit-transition-delay: 0.3s, 0.1s;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
  -moz-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  -webkit-animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  animation: mrotr 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
}
.model-1 .bar:nth-of-type(2) {
  top: 30px;
  -moz-transition: ease 0.3s 0.3s;
  -o-transition: ease 0.3s 0.3s;
  -webkit-transition: ease 0.3s;
  -webkit-transition-delay: 0.3s;
  transition: ease 0.3s 0.3s;
  -moz-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  -webkit-animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  animation: fade 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
}
.model-1 .bar:nth-of-type(3) {
  top: 45px;
  -moz-transition: top 0.3s ease 0.3s, -moz-transform 0.3s ease-out 0.1s;
  -o-transition: top 0.3s ease 0.3s, -o-transform 0.3s ease-out 0.1s;
  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  -webkit-transition-delay: 0.3s, 0.1s;
  transition: top 0.3s ease 0.3s, transform 0.3s ease-out 0.1s;
  -moz-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  -webkit-animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
  animation: mrotl 2s cubic-bezier(0.5, 0.2, 0.2, 1.01);
}
.model-1 .menu:hover .bar:nth-of-type(1) {
  top: 30px;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
  -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  -webkit-transition-delay: 0.1s, 0.5s;
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}
.model-1 .menu:hover .bar:nth-of-type(2) {
  opacity: 0;
}
.model-1 .menu:hover .bar:nth-of-type(3) {
  top: 30px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transition: top 0.3s ease 0.1s, -moz-transform 0.3s ease-out 0.5s;
  -o-transition: top 0.3s ease 0.1s, -o-transform 0.3s ease-out 0.5s;
  -webkit-transition: top 0.3s ease, -webkit-transform 0.3s ease-out;
  -webkit-transition-delay: 0.1s, 0.5s;
  transition: top 0.3s ease 0.1s, transform 0.3s ease-out 0.5s;
}                
              

其余代码请参考下载文件。