css3 javascript 实现菜单按钮特效_html/css_WEB-ITnose

企鹅博客 2019年9月1日04:41:09 评论 254
摘要

css3 javascript 实现菜单按钮特效

一个菜单按钮特效案例,简单的实现了动态效果。

代码效果预览地址:

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         }
weinxin
欢迎加入中国SEO站长博客之家
本站的所有资源都会上传分享到博客之家,希望大家互相学习交流进步。
企鹅博客

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: