一個菜單按鈕特效案例，簡單的實現了動態效果。

代碼效果預覽地址：

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) 0s 20 } 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 }

?

轉載于:https://www.cnblogs.com/younth/p/5183412.html

總結

以上是生活随笔為你收集整理的css3 javascript 实现菜单按钮特效的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。