css3 javascript 实现菜单按钮特效_html/css_WEB-ITnose
程序员文章站
2022-04-02 14:08:47
...
一个菜单按钮特效案例,简单的实现了动态效果。
代码效果预览地址:
http://code.w3ctech.com/detail/2504
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 }
推荐阅读
-
一款纯css3实现的颜色渐变按钮_html/css_WEB-ITnose
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
css3实现光标悬浮滚动菜单_html/css_WEB-ITnose
-
css3实现光标悬浮滚动菜单_html/css_WEB-ITnose
-
纯css3实现的幽灵按钮导航_html/css_WEB-ITnose
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
纯css3实现的动画加载特效_html/css_WEB-ITnose
-
纯css3实现的鼠标悬停动画按钮_html/css_WEB-ITnose