Html
    Css
    Js

    
                        
/*三条线*/
.hamburger {
	display:inline-block;
	cursor:pointer;
	transition-property:opacity,-webkit-filter;
	transition-property:opacity,filter;
	transition-property:opacity,filter,-webkit-filter;
	transition-duration:.15s;
	transition-timing-function:linear;
	font:inherit;
	color:inherit;
	text-transform:none;
	background-color:transparent;
	border:0;
	margin:0;
	overflow:visible;
	position:absolute;
	top:7%;
	left:3%
}
.hamburger--spin .hamburger-inner {
	transition-duration:.3s;
	transition-timing-function:cubic-bezier(.55,.055,.675,.19)
}
.hamburger--spin .hamburger-inner {
	transition-duration:.3s;
	transition-timing-function:cubic-bezier(.55,.055,.675,.19)
}
.hamburger-inner,.hamburger-inner::after,.hamburger-inner::before {
	width:30px;
	height:2px;
	background-color:#2e4139;
	border-radius:4px;
	position:absolute;
	transition-property:-webkit-transform;
	transition-property:transform;
	transition-property:transform,-webkit-transform;
	transition-duration:.15s;
	transition-timing-function:ease
}
.hamburger-inner {
	display:block;
	top:50%;
	margin-top:-2px
}
.hamburger--spin .hamburger-inner::before {
	transition:top .1s .34s ease-in,opacity .1s ease-in
}
.hamburger--spin .hamburger-inner::before {
	transition:top .1s .34s ease-in,opacity .1s ease-in
}
.hamburger-inner::before {
	top:-10px
}
.hamburger-inner::after,.hamburger-inner::before {
	content:"";
	display:block
}
.hamburger--spin .hamburger-inner::after {
	transition:bottom .1s .34s ease-in,-webkit-transform .3s cubic-bezier(.55,.055,.675,.19);
	transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19);
	transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19),-webkit-transform .3s cubic-bezier(.55,.055,.675,.19)
}
.hamburger--spin .hamburger-inner::after {
	transition:bottom .1s .34s ease-in,-webkit-transform .3s cubic-bezier(.55,.055,.675,.19);
	transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19);
	transition:bottom .1s .34s ease-in,transform .3s cubic-bezier(.55,.055,.675,.19),-webkit-transform .3s cubic-bezier(.55,.055,.675,.19)
}
.hamburger-inner::after {
	bottom:-10px
}
.hamburger-inner::after,.hamburger-inner::before {
	content:"";
	display:block
}
.hamburger--spin.is-active .hamburger-inner {
	-webkit-transform:rotate(225deg);
	transform:rotate(225deg);
	transition-delay:.14s;
	transition-timing-function:cubic-bezier(.215,.61,.355,1)
}
.hamburger--spin.is-active .hamburger-inner::before {
	top:0;
	opacity:0;
	transition:top .1s ease-out,opacity .1s .14s ease-out
}
.hamburger--spin.is-active .hamburger-inner::after {
	bottom:0;
	-webkit-transform:rotate(-90deg);
	transform:rotate(-90deg);
	transition:bottom .1s ease-out,-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1);
	transition:bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1);
	transition:bottom .1s ease-out,transform .3s .14s cubic-bezier(.215,.61,.355,1),-webkit-transform .3s .14s cubic-bezier(.215,.61,.355,1)
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:2.0.0
 立即下载

按钮三条线的效果

0