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

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

2023-10-24 285人已围观

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

      上一篇：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实现的边框过渡效果

    相关内容

    点击排行

    本栏推荐

    猜你喜欢

    -六神源码网