一款基于css3的列表toggle特效实例教程

　　今天给大家带来一款基于css3的列表toggle特效。右上角一个按钮，当列表不显示的时候，单击按钮列表动画出现，当列表显示时，单击按钮，列表动画消失，效果图如下：

　　实现的代码。

　　htm代码：

1. <div class='menu'>   
2.         toggle visibility</div>   
3.     <ul class='list reverse'>   
4.         <li class='item'>Item 1</li>   
5.         <li class='item'>Item 2</li>   
6.         <li class='item'>Item 3</li>   
7.         <li class='item'>Item 4</li>   
8.         <li class='item'>Item 5</li>   
9.         <li class='item'>Item 6</li>   
10.         <li class='item'>Item 7</li>   
11.         <li class='item'>Item 8</li>   
12.         <li class='item'>Item 9</li>   
13.         <li class='item'>Item 10</li>   
14.         <li class='item'>Item 11</li>   
15.         <li class='item'>Item 12</li>   
16.     </ul>  

　　css3代码：

1. * {   
2.   -moz-box-sizing: border-box;   
3.        box-sizing: border-box;   
4. }   
5.   
6. body {   
7.   margin: 0;   
8.   padding: 0;   
9.   font-family: 'Avenir Next';   
10.   background: #000;   
11.   color: white;   
12. }   
13.   
14. .menu {   
15.   background: tomato;   
16.   padding: 20px;   
17.   position: absolute;   
18.   z-index: 1;   
19.   height: 55px;   
20.   top: 0;   
21.   rightright: 50px;   
22. }   
23.   
24. .list {   
25.   -webkit-perspective: 100vw;   
26.           perspective: 100vw;   
27.   width: 100vw;   
28.   height: 100vh;   
29.   display: -webkit-flex;   
30.   display: -ms-flexbox;   
31.   display: flex;   
32.   -webkit-flex-flow: column wrap;   
33.       -ms-flex-flow: column wrap;   
34.           flex-flow: column wrap;   
35. }   
36. .list.