一个菜单按钮特效案例，简单的实现了动态效果。
代码效果预览地址：
/detail/2504
<div class="bar" id="menubar"><div class="menu" id="menu0"></div><div class="menu" id="menu1"></div><div class="menu" id="menu2"></div></div>
1 .bar{ 2 width:40px; 3 height:40px; 4 border:1px solid #ccc; 5 border-radius:50%; 6 position:fixed; 7 top:10px; 8 right:25px; 9 z-index:1000;10 cursor:pointer;11 }12 .menu{13 width:20px;14 height:2px;15 background-color:#ccc;16 position:absolute;17 transform:translate3d(-50%,-50%,0);18 left:50%;19 transition:all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s20 }21 #menu0{22 top:30%;23 }24 #menu1{25 top:50%;26 }27 #menu2{28 top:70%;29 }
1 window.onload = function () { 2 var menubar = document.getElementById("menubar"); 3 var menu0 = document.getElementById("menu0"); 4 var menu1 = document.getElementById("menu1"); 5 var menu2 = document.getElementById("menu2"); 6 var i = 0; 7 menubar.onclick = function () { 8 i++; 9 if (i % 2 == 1) {10 menu0.style.top = 50 + "%";11 menu1.style.display = "none";12 menu2.style.top = 50 + "%";13 menu0.style.transform = "translate3d(-50%,-50%,0) rotate(135deg)";14 menu2.style.transform = "translate3d(-50%,-50%,0) rotate(405deg)";15 }16 else {17 menu0.style.transform = "translate3d(-50%,-50%,0) rotate(0deg)";18 menu2.style.transform = "translate3d(-50%,-50%,0) rotate(0deg)";19 menu0.style.top = 30 + "%";20 menu2.style.top = 70 + "%";21 menu1.style.display = "block";22 }23 }24 25 }
