您现在的位置是：网站首页> 编程资料编程资料

一款基于css3的列表toggle特效实例教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

2021-09-05 968人已围观

简介 之前介绍了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. <

      上一篇：CSS Hack详解CSS hack 针对IE6，IE7，firefox显示不同效果IE6/IE7/IE8/Firefox/Chrome/Safari的CSS hack兼容一览表纯CSS无hacks的跨游览器自适应高度多列布局 推荐纯CSS下拉菜单(无js,无hacks,支持IE6)css hack之清除浮动(clearfix) 不同浏览器的CSS Hack写法小结CSS 完美兼容IE6/IE7/FF的通用hack方法IE6789,FF之间Css Hack整理

      下一篇：一款利用html5和css3实现的3D滚动特效的教程css3中transform属性实现的4种功能详解CSS3.0(Cascading Style Sheet) 层叠级联样式表纯CSS3实现div按照顺序出入效果CSS3实现列表无限滚动/轮播效果css3 利用transform-origin 实现圆点分布在大圆上布局及旋转特效CSS3实现的侧滑菜单CSS3实现的3D隧道效果用CSS3画一个爱心css3 实现文字闪烁效果的三种方式示例代码六种css3实现的边框过渡效果

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网