css3 javascript 实现菜单按钮特效

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

代码效果预览地址：

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         }

 

posted @ 2016-02-05 17:29  我一路向北  阅读(984)  评论(0)  编辑  收藏  举报