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

2023-06-13 04:40:03分类：常见问题 / CSS3 答疑阅读(3412)评论(0)

之前介绍了css3的很多实例教程，今天给大家带来一款基于css3的列表toggle特效。右上角一个按钮，当列表不显示的时候，单击按钮列表动画出现，当列表显示时，单击按钮，列表动画消失

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

　　实现的代码。

　　htm代码：

复制内容到剪贴板
  1. class='menu'>   
  2.         toggle visibility
  
  •     class='list reverse'>   
  •         class='item'>Item 1
    •   
  •         class='item'>Item 2
    •   
  •         class='item'>Item 3
    •   
  •         class='item'>Item 4
    •   
  •         class='item'>Item 5
    •   
  •         class='item'>Item 6
    •   
  •         class='item'>Item 7
    •   
  •         class='item'>Item 8
    •   
  •         class='item'>Item 9
    •   
  •         class='item'>Item 10
    •   
  •         class='item'>Item 11
    •   
  •         class='item'>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特效实例教程的详细内容，更多请关注0133技术站其它相关文章！

    赞(0) 打赏
    未经允许不得转载：0133技术站首页 » CSS3 答疑

    相关文章

    常见问题

    HTML5 答疑CSS3 答疑JavaScript 答疑JSON 答疑jQuery 答疑Angular.js 答疑Node.js答疑React 答疑Vue.js 答疑前端答疑其他答疑

    置顶推荐

    猜你喜欢