汉堡式折叠html,纯CSS3菜单汉堡包按钮变形动画特效

这是一款非常有趣的纯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;

}

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