.wrap { width:48px; height:30px; border:1px solid #ccc; position:relative; } span { height:2px; position:absolute; color:#484848; width:30px; margin:10px 10px; display:block; background:#484848; transition:.5s; } span:nth-child(2) { top:10px } .span1 { position:absolute; transform:rotate(-46deg); margin:15px 10px; height:2px; transition:.5s; } .span2 { position:absolute; transform:rotate(45deg); margin:5px 10px; height:2px; transition:.5s; }
简单常用的相应菜单导航切换按钮动画