绵阳梓潼网站制作公司

如何实现基于css3的列表toggle特效

这篇文章主要讲解了“如何实现基于css3的列表toggle特效”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“如何实现基于css3的列表toggle特效”吧！

从网站建设到定制行业解决方案，为提供网站制作、网站建设服务体系，各种行业企业客户提供网站建设解决方案，助力业务快速发展。创新互联建站将不断加快创新步伐，提供优质的建站服务。

实现的代码。

htm代码：

复制内容到剪贴板

  1.   

  2.         toggle visibility

  

  •        

  •         Item 1

    •   

  •         Item 2

    •   

  •         Item 3

    •   

  •         Item 4

    •   

  •         Item 5

    •   

  •         Item 6

    •   

  •         Item 7

    •   

  •         Item 8

    •   

  •         Item 9

    •   

  •         Item 10

    •   

  •         Item 11

    •   

  •         Item 12

    •   

  •       

    • css3代码：

    CSS Code复制内容到剪贴板

    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.hidden {   

    37.   pointer-events: none;   

    38. }   

    39. .list.hidden .item {   

    40.   -webkit-animation: disappear both;   

    41.           animation: disappear both;   

    42.   -webkit-animation-direction: alternate;   

    43.           animation-direction: alternate;   

    44. }   

    45. .list.reverse {   

    46.   -webkit-flex-flow: row-reverse wrap-reverse;   

    47.       -ms-flex-flow: row-reverse wrap-reverse;   

    48.           flex-flow: row-reverse wrap-reverse;   

    49. }   

    50.   

    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: appear both;   

    58.           animation: appear both;   

    59. }   

    60.   

    61. .item:nth-child(1) {   

    62.   background: #008a8a;   

    63.   -webkit-animation-delay: 0.03333s !important;   

    64.   -webkit-animation-duration: 0.1s !important;   

    65. }   

    66.   

    67. .item:nth-child(2) {   

    68.   background: #009494;   

    69.   -webkit-animation-delay: 0.06667s !important;   

    70.   -webkit-animation-duration: 0.2s !important;   

    71. }   

    72.   

    73. .item:nth-child(3) {   

    74.   background: #009f9f;   

    75.   -webkit-animation-delay: 0.1s !important;   

    76.   -webkit-animation-duration: 0.3s !important;   

    77. }   

    78.   

    79. .item:nth-child(4) {   

    80.   background: #00a9a9;   

    81.   -webkit-animation-delay: 0.13333s !important;   

    82.   -webkit-animation-duration: 0.4s !important;   

    83. }   

    84.   

    85. .item:nth-child(5) {   

    86.   background: #00b3b3;   

    87.   -webkit-animation-delay: 0.16667s !important;   

    88.   -webkit-animation-duration: 0.5s !important;   

    89. }   

    90.   

    91. .item:nth-child(6) {   

    92.   background: #00bdbd;   

    93.   -webkit-animation-delay: 0.2s !important;   

    94.   -webkit-animation-duration: 0.6s !important;   

    95. }   

    96.   

    97. .item:nth-child(7) {   

    98.   background: #00c7c7;   

    99.   -webkit-animation-delay: 0.23333s !important;   

    100.   -webkit-animation-duration: 0.7s !important;   

    101. }   

    102.   

    103. .item:nth-child(8) {   

    104.   background: #00d2d2;   

    105.   -webkit-animation-delay: 0.26667s !important;   

    106.   -webkit-animation-duration: 0.8s !important;   

    107. }   

    108.   

    109. .item:nth-child(9) {   

    110.   background: #00dcdc;   

    111.   -webkit-animation-delay: 0.3s !important;   

    112.   -webkit-animation-duration: 0.9s !important;   

    113. }   

    114.   

    115. .item:nth-child(10) {   

    116.   background: #00e6e6;   

    117.   -webkit-animation-delay: 0.33333s !important;   

    118.   -webkit-animation-duration: 1s !important;   

    119. }   

    120.   

    121. .item:nth-child(11) {   

    122.   background: #00f0f0;   

    123.   -webkit-animation-delay: 0.36667s !important;   

    124.   -webkit-animation-duration: 1.1s !important;   

    125. }   

    126.   

    127. .item:nth-child(12) {   

    128.   background: #00fafa;   

    129.   -webkit-animation-delay: 0.4s !important;   

    130.   -webkit-animation-duration: 1.2s !important;   

    131. }   

    132.   

    133. @-webkit-keyframes appear {   

    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. }   

    145.   

    146. @keyframes appear {   

    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-keyframes disappear {   

    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. @keyframes disappear {   

    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特效这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是创新互联，小编将为大家推送更多相关知识点的文章，欢迎关注！


    名称栏目：如何实现基于css3的列表toggle特效
    文章源于：http://myzitong.com/article/ppdiip.html

    其他资讯