首页 网页制作网络编程脚本专栏数据库网站运营网络安全平面设计CMS教程

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

所属分类： 网页制作 / CSS 阅读数： 1774
收藏 0 赞 0 分享

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

　　实现的代码。

　　htm代码：

复制内容到剪贴板
  1. <div class='menu'>   
  2.         toggle visibility</div>   
  3.     <ul class='list reverse'>   
  4.         <li class='item'>Item 1</li>   
  5.         <li class='item'>Item 2</li>   
  6.         <li class='item'>Item 3</li>   
  7.         <li class='item'>Item 4</li>   
  8.         <li class='item'>Item 5</li>   
  9.         <li class='item'>Item 6</li>   
  10.         <li class='item'>Item 7</li>   
  11.         <li class='item'>Item 8</li>   
  12.         <li class='item'>Item 9</li>   
  13.         <li class='item'>Item 10</li>   
  14.         <li class='item'>Item 11</li>   
  15.         <li class='item'>Item 12</li>   
  16.     </ul>  

　　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. }  
更多精彩内容其他人还在看

CSS配合JavaScript做酷的动态页面效果

　　利用CSS配合JavaScript的可以做很多更酷的动态页面效果，在本教程的最后给大家简单介绍一下CSS配合JS的应用。首先，要搞清楚事件和动作的概念。在客户端脚本中，JavaScript 通过对事件进行响应来获得与用户的交互。例如，当用户单击一个按钮或者在某段文字上移动鼠标
收藏 0 赞 0 分享

WEB标准,Web前端开发工程师必备技术列表

　　想要打造并拥有一流的Web产品开发团队，在团队成员基础能力上一定要下功夫。对于Web前端产品开发来说，仅仅掌握Web1.0时代简单的"网页套接"是完全不够的。我结合自己的团队配备，特此罗列了Web前端产品工程师所涉及的技能列表如下： 　　通过许多实际项目，
收藏 0 赞 0 分享

用CSS制作Alpha滤镜测试板

alpha滤镜给制作网页特效提供了较大的创作空间，但由于它控制参数较多，在实际应用时，为了确定一组合适的参数值，不得不反复调整修改，在编辑窗口和预览窗口来回倒腾，甚是麻烦，本文介绍了一种简单的方法。制作一个“Alpha滤镜参数测试板”，在测试板上输入参数
收藏 0 赞 0 分享

非常流行的所谓的气泡窗口

普通的Alt无法自定义风格,而Sweet Titles通过JS脚本与CSS的集合.自定义了这种伪Alt风格. 前一段时间非常流行的,就所谓的气泡窗口(鼠标移到链接处出现的). 我们这里实现的用的是Sweet Titles的插件.显示效果完全由CSS控制.. 先下载Sweet Ti
收藏 0 赞 0 分享

CSS教程：li和ul标签用法举例

LI代码的格式化: A).运用CSS格式化列表符： ul li{ list-style-type:none; } B).如果你想将列表符换成图像，则： ul li{ list-style-type:none; list-style-image: url(/blog/images/
收藏 0 赞 0 分享

CSS教程:CSS中的定位（position）

　　使用CSS来定位页面内层的位置，一直是比较难以掌握的事情，很多时候，往往被绝对定位的元素，总是以浏览器的左上角为坐标原点，此时，如果浏览器的大小改变，被定义的层就会偏离设计想要的位置，让人很挠头。 　　其实，要想控制好层的绝对定位，只要理解CSS中关于定位
收藏 0 赞 0 分享

CSS教程:盒模型(BOX Model)

　　如果想熟练掌握DIV和CSS的布局方法，首先要对盒模型有足够的了解。每个HTML元素都可以看作一个装了东西的盒子，盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin），如图1所示。
收藏 0 赞 0 分享

无延迟翻滚的图形与CSS混合风格按钮

　　在一个具有图形背景的按钮中添加CSS风格的文本，这种建立按钮的方法结合了具有CSS翻滚(CSS rollover)标记的开发速度和效率，从而有效地提高按钮外表图像的三维效果。 　　相比于常规的图形按钮，这些图形/CSS混合按钮可易于建立和载入，因为你只需要为空白按钮外面
收藏 0 赞 0 分享

css里expression实现界面对象的批量控制

用过css样式我们就知道, 可以定义一批对象的class属性来指定同一个样式来统一界面. 但如何统一同类型的对象的事件? 比如:界面有无数个 <img src="**.jpg"> 如何实现鼠标经过此图片, 图片的src变成是**_over.jpg?
收藏 0 赞 0 分享

CSS教程:水平对齐(text-align)

　　水平对齐（text-align），用以设定元素内文本的水平对齐方式。 　　1.语法 　　text-align具体参数如下： 语法：text-align:left|right|center|justify 说明：设定元素内文本的水平对齐方式。 参数：left:左
收藏 0 赞 0 分享
查看更多

网络赚钱

更多

站长故事

更多
建站极客
合作伙伴
在线工具
建站极客移动版
聚合全网技术文章，根据你的阅读喜好进行个性推荐
© 2012 - 2020 www.zhanzhang360.cn Some Rights Reserved.
沪ICP备13040166号-22