CSS 3 闪烁跳跃的进度条

开发 前端
这个示例的原理和以前的都是一样的,都是通过大量的css3属性来实现的,如:animation、transform、keyframes等等属性。值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出。

之前为大家分享过一篇关于css3进度条的一篇文章《实现CSS3动态进度条及JQUERY百分比数字显示》,今天为大家带来另一款更具个性化的进度条:CSS3闪烁跳跃的进度条。

flashing-jumping-progress-bar

查看预览  下载附件

这个示例的原理和以前的都是一样的,都是通过大量的css3属性来实现的,如:animation、transform、keyframes等等属性。值得注意的是这个示例采用了结构性伪类选择符E:nth-child(n),来进行对HTML元素的选择以及控制输出。相信这个伪类选择符在将来会是一个很强大的一个工具。推荐大家多多了解以及实践使用。

这个伪类选择符E:nth-child(n)的含义是匹配父元素的第n个子元素E。 例如:ul li:nth-child(3)表示的是选择<ul>元素里面的第3个<li>。提示一下,该属性在IE8(包含IE8)版本以下是不支持的。下面就一起来看看该示例的实现代码吧,完整的代码可下载附件查看。

HTML结构代码

  1. <div class="center"> 
  2.   <ul> 
  3.     <li> 
  4.       <div></div> 
  5.     </li> 
  6.     <li> 
  7.       <div></div> 
  8.     </li> 
  9.     <li> 
  10.       <div></div> 
  11.     </li> 
  12.     <li> 
  13.       <div></div> 
  14.     </li> 
  15.     <li> 
  16.       <div></div> 
  17.     </li> 
  18.     <li> 
  19.       <div></div> 
  20.     </li> 
  21.     <li> 
  22.       <div></div> 
  23.     </li> 
  24.   </ul> 
  25. </div> 

CSS样式代码

  1.  @keyframes bump {  
  2.  0% {  
  3.  opacity: 0;  
  4.  left: 535px;  
  5. }  
  6.  100% {  
  7.  left: -10px;  
  8.  opacity: 0;  
  9. }  
  10.  10%85% {  
  11.  opacity: 1;  
  12. }  
  13. }  
  14.  @keyframes spin {  
  15.  0%100% {  
  16.  height20px;  
  17.  top: 50px;  
  18. }  
  19.  50% {  
  20.  height100px;  
  21.  top: 0;  
  22. }  
  23. }  
  24. body {  
  25.     background: rgba(0000.2);  
  26. }  
  27. div.center {  
  28.     text-aligncenter;  
  29.     margin-top40px;  
  30. }  
  31. ul {  
  32.     background-color: rgba(2552552550.4);  
  33.     positionrelative;  
  34.     displayblock;  
  35.     padding0;  
  36.     marginauto;  
  37.     width600px;  
  38.     height10px;  
  39.     list-stylenone;  
  40.     border-radius: 200px;  
  41.     border5px solid rgba(2552552550.2);  
  42.     margin-top100px;  
  43.     box-shadow: 0 0 5px 5px rgba(0000.1);  
  44. }  
  45. ul li {  
  46.     positionabsolute;  
  47.     margin-top-55px;  
  48. }  
  49. ul li:nth-child(1) {  
  50.     animation: bump 1.5s infinite;  
  51.     animation-delay: 0.1s;  
  52. }  
  53. ul li:nth-child(1) div {  
  54.     border-radius: 22px;  
  55.     transform-origin: center;  
  56.     positionabsolute;  
  57.     height60px;  
  58.     width80px;  
  59.     animation: spin 0.4s infinite;  
  60.     animation-delay: 0.1s;  
  61.     background-color: rgba(1201201200.3);  
  62. }  
  63. ul li:nth-child(2) {  
  64.     animation: bump 1.5s infinite;  
  65.     animation-delay: 0.2s;  
  66. }  
  67. ul li:nth-child(2) div {  
  68.     border-radius: 22px;  
  69.     transform-origin: center;  
  70.     positionabsolute;  
  71.     height60px;  
  72.     width80px;  
  73.     animation: spin 0.4s infinite;  
  74.     animation-delay: 0.2s;  
  75.     background-color: rgba(120000.3);  
  76. }  
  77. ul li:nth-child(3) {  
  78.     animation: bump 1.5s infinite;  
  79.     animation-delay: 0.3s;  
  80. }  
  81. ul li:nth-child(3) div {  
  82.     border-radius: 22px;  
  83.     transform-origin: center;  
  84.     positionabsolute;  
  85.     height60px;  
  86.     width80px;  
  87.     animation: spin 0.4s infinite;  
  88.     animation-delay: 0.3s;  
  89.     background-color: rgba(12012000.3);  
  90. }  
  91. ul li:nth-child(4) {  
  92.     animation: bump 1.5s infinite;  
  93.     animation-delay: 0.4s;  
  94. }  
  95. ul li:nth-child(4) div {  
  96.     border-radius: 22px;  
  97.     transform-origin: center;  
  98.     positionabsolute;  
  99.     height60px;  
  100.     width80px;  
  101.     animation: spin 0.4s infinite;  
  102.     animation-delay: 0.4s;  
  103.     background-color: rgba(012000.3);  
  104. }  
  105. ul li:nth-child(5) {  
  106.     animation: bump 1.5s infinite;  
  107.     animation-delay: 0.5s;  
  108. }  
  109. ul li:nth-child(5) div {  
  110.     border-radius: 22px;  
  111.     transform-origin: center;  
  112.     positionabsolute;  
  113.     height60px;  
  114.     width80px;  
  115.     animation: spin 0.4s infinite;  
  116.     animation-delay: 0.5s;  
  117.     background-color: rgba(01201200.3);  
  118. }  
  119. ul li:nth-child(6) {  
  120.     animation: bump 1.5s infinite;  
  121.     animation-delay: 0.6s;  
  122. }  
  123. ul li:nth-child(6) div {  
  124.     border-radius: 22px;  
  125.     transform-origin: center;  
  126.     positionabsolute;  
  127.     height60px;  
  128.     width80px;  
  129.     animation: spin 0.4s infinite;  
  130.     animation-delay: 0.6s;  
  131.     background-color: rgba(001200.3);  
  132. }  
  133. ul li:nth-child(7) {  
  134.     animation: bump 1.5s infinite;  
  135.     animation-delay: 0.7s;  
  136. }  
  137. ul li:nth-child(7) div {  
  138.     border-radius: 22px;  
  139.     transform-origin: center;  
  140.     positionabsolute;  
  141.     height60px;  
  142.     width80px;  
  143.     animation: spin 0.4s infinite;  
  144.     animation-delay: 0.7s;  
  145.     background-color: rgba(12001200.3);  

注:请自行在所需之处加上浏览器前缀(如:-webkit- 、 -moz-),否则将不能正常显示效果。

原文链接:http://www.jiawin.com/flashing-jumping-progress-bar/

责任编辑:张伟 来源: 觉唯
相关推荐

2015-07-31 11:19:43

数字进度条源码

2023-11-30 11:38:29

CSS网页进度条

2021-11-02 07:44:36

CSS 技巧进度条

2011-07-05 15:16:00

QT 进度条

2015-01-12 12:13:03

Android进度条ProgressDia

2015-08-03 11:39:20

拟物化进度条

2015-01-12 09:30:54

Android进度条ProgressDia

2012-12-24 11:13:17

CSSjQueryJavaScript

2012-01-17 13:58:17

JavaSwing

2009-06-06 18:54:02

JSP编程进度条

2023-12-11 17:15:05

应用开发波纹进度条ArkUI

2012-07-31 09:53:33

HTML5进度条

2009-12-25 17:58:12

WPF进度条

2009-08-18 09:49:00

C# listview

2009-08-17 15:48:47

C# WinForm进

2009-08-17 14:41:47

C#进度条实现

2010-01-25 18:27:54

Android进度条

2020-12-14 13:32:40

Python进度条参数

2019-04-16 14:36:32

QQApp Store语音

2023-12-27 13:45:00

Python进度条代码
点赞
收藏

51CTO技术栈公众号