这是一款非常有趣的纯CSS3菜单汉堡包按钮变形动画特效。该特效共有9种不同的按钮变形动画效果，这些效果都是使用CSS3帧动画完成的，效果非常的酷。
制作方法
HTML结构
该按钮变形动画使用嵌套
的HTML结构。使用一个元素作为包裹元素，里面放置一个div.menu作为按钮元素。它的里面有三个空的元素用于制作汉堡包按钮的三条横线。
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;
}
其余代码请参考下载文件。
