这是一款非常有趣的纯 CSS3 菜单汉堡包按钮变形动画特效。该特效共有 9 种不同的按钮变形动画效果,这些效果都是使用 CSS3 帧动画完成的,效果非常的酷。
该按钮变形动画使用嵌套
<section class="mod model-1">
<div class="menu">
<div class="bar"></div>
<div class="bar"></div>
<div class="bar"></div>
</div>
</section>
首先为菜单和每个.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;
}
其余代码请参考下载文件。
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!