Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
.icon_box {
	width:70px;
	height:100px;
	margin:200px auto;
	cursor:pointer;
}
.icon_box span {
	width:70px;
	height:6px;
	background:yellowgreen;
	display:block;
	margin-bottom:3px;
	transition:all 1s;
	-webkit-transition:all 1s;
	transform-origin:20px center;
}
.icon1 {
	transform:rotate(45deg)!important;
}
.icon2 {
	width:0!important;
	margin-left:70px!important;
}
.icon3 {
	transform:rotate(-45deg)!important;
}

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

利用css菜单变X号

先预定几个class,然后配合css3的transtion属性制作动画效果。click的时候切换class来实现此效果。

0