メニュー ボタンの特殊効果を実装する css3 JavaScript_html/css_WEB-ITnose

単純に動的な効果を実装するメニュー ボタンの特殊効果のケース。

コード効果のプレビュー アドレス:

http://code.w3ctech.com/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         }