* { 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; }
先预定几个class,然后配合css3的transtion属性制作动画效果。click的时候切换class来实现此效果。