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

网络
在岁月中跋涉，每个人都有自己的故事，看淡心境才会秀丽，看开心情才会明媚。累时歇一歇，随清风漫舞，烦时静一静，与花草凝眸，急时缓一缓，和自己微笑。

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

　　实现的代码。

　　htm代码：

复制内容到剪贴板
  1. <divclass='menu'>
  2. togglevisibility</div>
  3. <ulclass='listreverse'>
  4. <liclass='item'>Item1</li>
  5. <liclass='item'>Item2</li>
  6. <liclass='item'>Item3</li>
  7. <liclass='item'>Item4</li>
  8. <liclass='item'>Item5</li>
  9. <liclass='item'>Item6</li>
  10. <liclass='item'>Item7</li>
  11. <liclass='item'>Item8</li>
  12. <liclass='item'>Item9</li>
  13. <liclass='item'>Item10</li>
  14. <liclass='item'>Item11</li>
  15. <liclass='item'>Item12</li>
  16. </ul>

　　css3代码：

CSS Code复制内容到剪贴板
  1. *{
  2. -moz-box-sizing:border-box;
  3. box-sizing:border-box;
  4. }
  6. body{
  7. margin:0;
  8. padding:0;
  9. font-family:'AvenirNext';
  10. background:#000;
  11. color:white;
  12. }
  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. }
  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:columnwrap;
  33. -ms-flex-flow:columnwrap;
  34. flex-flow:columnwrap;
  35. }
  36. .list.hidden{
  37. pointer-events:none;
  38. }
  39. .list.hidden.item{
  40. -webkit-animation:disappearboth;
  41. animation:disappearboth;
  42. -webkit-animation-direction:alternate;
  43. animation-direction:alternate;
  44. }
  45. .list.reverse{
  46. -webkit-flex-flow:row-reversewrap-reverse;
  47. -ms-flex-flow:row-reversewrap-reverse;
  48. flex-flow:row-reversewrap-reverse;
  49. }
  51. .item{
  52. font-size:30px;
  53. padding:20px;
  54. height:100px;
  55. width:calc(100vw/3);
  56. height:calc(100vh/4);
  57. -webkit-animation:appearboth;
  58. animation:appearboth;
  59. }
  61. .item:nth-child(1){
  62. background:#008a8a;
  63. -webkit-animation-delay:0.03333s!important;
  64. -webkit-animation-duration:0.1s!important;
  65. }
  67. .item:nth-child(2){
  68. background:#009494;
  69. -webkit-animation-delay:0.06667s!important;
  70. -webkit-animation-duration:0.2s!important;
  71. }
  73. .item:nth-child(3){
  74. background:#009f9f;
  75. -webkit-animation-delay:0.1s!important;
  76. -webkit-animation-duration:0.3s!important;
  77. }
  79. .item:nth-child(4){
  80. background:#00a9a9;
  81. -webkit-animation-delay:0.13333s!important;
  82. -webkit-animation-duration:0.4s!important;
  83. }
  85. .item:nth-child(5){
  86. background:#00b3b3;
  87. -webkit-animation-delay:0.16667s!important;
  88. -webkit-animation-duration:0.5s!important;
  89. }
  91. .item:nth-child(6){
  92. background:#00bdbd;
  93. -webkit-animation-delay:0.2s!important;
  94. -webkit-animation-duration:0.6s!important;
  95. }
  97. .item:nth-child(7){
  98. background:#00c7c7;
  99. -webkit-animation-delay:0.23333s!important;
  100. -webkit-animation-duration:0.7s!important;
  101. }
  103. .item:nth-child(8){
  104. background:#00d2d2;
  105. -webkit-animation-delay:0.26667s!important;
  106. -webkit-animation-duration:0.8s!important;
  107. }
  109. .item:nth-child(9){
  110. background:#00dcdc;
  111. -webkit-animation-delay:0.3s!important;
  112. -webkit-animation-duration:0.9s!important;
  113. }
  115. .item:nth-child(10){
  116. background:#00e6e6;
  117. -webkit-animation-delay:0.33333s!important;
  118. -webkit-animation-duration:1s!important;
  119. }
  121. .item:nth-child(11){
  122. background:#00f0f0;
  123. -webkit-animation-delay:0.36667s!important;
  124. -webkit-animation-duration:1.1s!important;
  125. }
  127. .item:nth-child(12){
  128. background:#00fafa;
  129. -webkit-animation-delay:0.4s!important;
  130. -webkit-animation-duration:1.2s!important;
  131. }
  133. @-webkit-keyframesappear{
  134. from{
  135. opacity:0;
  136. -webkit-transform:scale(0.8);
  137. transform:scale(0.8);
  138. }
  139. to{
  140. opacity:1;
  141. -webkit-transform:scale(1);
  142. transform:scale(1);
  143. }
  144. }
  146. @keyframesappear{
  147. from{
  148. opacity:0;
  149. -webkit-transform:scale(0.8);
  150. transform:scale(0.8);
  151. }
  152. to{
  153. opacity:1;
  154. -webkit-transform:scale(1);
  155. transform:scale(1);
  156. }
  157. }
  158. @-webkit-keyframesdisappear{
  159. from{
  160. opacity:1;
  161. -webkit-transform:scale(1);
  162. transform:scale(1);
  163. }
  164. to{
  165. opacity:0;
  166. -webkit-transform:scale(0.9)rotateX(0deg)translateZ(-1500px);
  167. transform:scale(0.9)rotateX(0deg)translateZ(-1500px);
  168. }
  169. }
  170. @keyframesdisappear{
  171. from{
  172. opacity:1;
  173. -webkit-transform:scale(1);
  174. transform:scale(1);
  175. }
  176. to{
  177. opacity:0;
  178. -webkit-transform:scale(0.9)rotateX(0deg)translateZ(-1500px);
  179. transform:scale(0.9)rotateX(0deg)translateZ(-1500px);
  180. }
  181. }

到此这篇关于一款基于css3的列表toggle特效实例好代码教程就介绍到这了。青春啊，永远是美好的，可是真正的青春，只属于这些永远力争上游的人，永远忘我劳动的人，永远谦虚的人。更多相关一款基于css3的列表toggle特效实例好代码教程内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！