汉堡式折叠html,3种超酷汉堡包菜单按钮变形动画特效

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

HTML结构

该汉堡包按钮的HTML结构非常简单，使用嵌套

的HTML结构。

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来添加.open或burger1-open class类，3种汉堡包菜单按钮此时会分别使用transition和transform来制作不同的动画。

.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");

})

})