列表翻转效果

 

　　　　　

 1 <html>
 2 <head>
 3     <meta charset="UTF-8">
 4     <title>33</title>
 5     <style>
 6         div{
 7             width: 100px;
 8             line-height: 50px;
 9             background-color: #aaa;
10         }
11         li{
12             width: 100px;
13             line-height: 40px;
14             background-color: lightblue;
15             text-align: center;
16             list-style: none;
17             transform:rotateY(90deg);
18             opacity: 0;
19             transition:transform .5s ease-in 0s;
20         }
21         .move li{
22             animation: move .5s  linear 0s 1 forwards;
23         }
24         .move.then li{
25             opacity: 1;
26             animation: back .5s  linear 0s 1 forwards;
27         }
28         @keyframes move{
29             from{transform:rotateY(90deg);opacity: 0;}
30             to{transform:rotateY(0);opacity: 1;}
31         }
32         @keyframes back{
33             from{transform:rotateY(0);opacity: 1;}
34             to{transform:rotateY(90deg);opacity: 0;}
35         }
36     </style>
37 </head>
38 <body>
39     <div id="box">测试呢</div>
40     <ul id="list">
41         <li>11</li>
42         <li>11</li>
43         <li>11</li>
44         <li>11</li>
45         <li>11</li>
46         <li>11</li>
47         <li>11</li>
48         <li>11</li>
49     </ul>
50     <script>
51         var box = document.getElementById("box");
52         var list = document.getElementById("list");
53         var liArr = list.getElementsByTagName("li");
54         
55 
56         box.onmouseover = function () {
57             // box.onmouseout = null;
58             list.className = "move";
59             for(var i=0;i<liArr.length;i++){
60                 liArr[i].style.opacity = 0;
61                 liArr[i].style.transform = "rotateY(90deg)";
62                 liArr[i].style.animationDelay = (.1*i) + "s";
63             }
64         }
65         box.onmouseout = function () {
66             // box.onmouseover = null;
67             list.className = "move then";
68             for(var i=0;i<liArr.length;i++){
69                 liArr[i].style.opacity = 1;
70                 liArr[i].style.transform = "rotateY(0)";
71                 liArr[i].style.animationDelay = (liArr.length-i)*.1 + .5 + "s";
72             }
73         }
74     </script>
75 </body>
76 </html>

 

　}
　　　　</script>
　　</body>
</html>

posted @ 2016-03-17 16:23  DalyYang  阅读(146)  评论(0)  编辑  收藏  举报