Css3闪烁跳跃的进度条

Css3闪烁跳跃的进度条

本例主要运用Css3中animation属性绘制动画图形

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. @-webkit-keyframes bump {
  2.     0% {
  3.     opacity: 0;
  4.     left535px;
  5. }
  6. 100% {
  7.     left: -10px;
  8.     opacity: 0;
  9. }
  10. 10%, 85% {
  11.     opacity: 1;
  12. }
  13. }
  14. @-moz-keyframes bump {
  15.     0% {
  16.     opacity: 0;
  17.     left535px;
  18. }
  19. 100% {
  20.     left: -10px;
  21.     opacity: 0;
  22. }
  23. 10%, 85% {
  24.     opacity: 1;
  25. }
  26. }
  27. @-ms-keyframes bump {
  28.     0% {
  29.     opacity: 0;
  30.     left535px;
  31. }
  32. 100% {
  33.     left: -10px;
  34.     opacity: 0;
  35. }
  36. 10%, 85% {
  37.     opacity: 1;
  38. }
  39. }
  40. @keyframes bump {
  41.     0% {
  42.     opacity: 0;
  43.     left535px;
  44. }
  45. 100% {
  46.     left: -10px;
  47.     opacity: 0;
  48. }
  49. 10%, 85% {
  50.     opacity: 1;
  51. }
  52. }
  53. @-webkit-keyframes spin {
  54.     0%, 100% {
  55.     height20px;
  56.     top50px;
  57. }
  58. 50% {
  59.     height100px;
  60.     top: 0;
  61. }
  62. }
  63. @-moz-keyframes spin {
  64.     0%, 100% {
  65.     height20px;
  66.     top50px;
  67. }
  68. 50% {
  69.     height100px;
  70.     top: 0;
  71. }
  72. }
  73. @-ms-keyframes spin {
  74.     0%, 100% {
  75.     height20px;
  76.     top50px;
  77. }
  78. 50% {
  79.     height100px;
  80.     top: 0;
  81. }
  82. }
  83. @keyframes spin {
  84.     0%, 100% {
  85.     height20px;
  86.     top50px;
  87. }
  88. 50% {
  89.     height100px;
  90.     top: 0;
  91. }
  92. }
  93. body {
  94.     background: rgba(0, 0, 0, 0.2);
  95. }
  96. div.center {
  97.     text-aligncenter;
  98.     margin-top40px;
  99. }
  100. ul {
  101.     background-color: rgba(255, 255, 255, 0.4);
  102.     positionrelative;
  103.     displayblock;
  104.     padding: 0;
  105.     marginauto;
  106.     width600px;
  107.     height10px;
  108.     list-stylenone;
  109.     -webkit-border-radius: 200px;
  110.     -moz-border-radius: 200px;
  111.     -ms-border-radius: 200px;
  112.     -o-border-radius: 200px;
  113.     border-radius: 200px;
  114.     border5px solid rgba(255, 255, 255, 0.2);
  115.     margin-top100px;
  116.     -webkit-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  117.     -moz-box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  118.     box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.1);
  119. }
  120. ul li {
  121.     positionabsolute;
  122.     margin-top: -55px;
  123. }
  124. ul li:nth-child(1) {
  125.     -webkit-animation: bump 1.5s infinite;
  126.     -moz-animation: bump 1.5s infinite;
  127.     -o-animation: bump 1.5s infinite;
  128.     animation: bump 1.5s infinite;
  129.     -webkit-animation-delay: 0.1s;
  130.     -moz-animation-delay: 0.1s;
  131.     -o-animation-delay: 0.1s;
  132.     animation-delay: 0.1s;
  133. }
  134. ul li:nth-child(1) div {
  135.     -webkit-border-radius: 22px;
  136.     -moz-border-radius: 22px;
  137.     -ms-border-radius: 22px;
  138.     -o-border-radius: 22px;
  139.     border-radius: 22px;
  140.     -webkit-transform-origin: center;
  141.     -moz-transform-origin: center;
  142.     transform-origin: center;
  143.     positionabsolute;
  144.     height60px;
  145.     width80px;
  146.     -webkit-animation: spin 0.4s infinite;
  147.     -moz-animation: spin 0.4s infinite;
  148.     -o-animation: spin 0.4s infinite;
  149.     -webkit-animation: spin 0.4s infinite;
  150.     -webkit-animation-delay: 0.1s;
  151.     -moz-animation: spin 0.4s infinite;
  152.     -moz-animation-delay: 0.1s;
  153.     animation: spin 0.4s infinite;
  154.     animation-delay: 0.1s;
  155.     background-color: rgba(120, 120, 120, 0.3);
  156. }
  157. ul li:nth-child(2) {
  158.     -webkit-animation: bump 1.5s infinite;
  159.     -moz-animation: bump 1.5s infinite;
  160.     -o-animation: bump 1.5s infinite;
  161.     -webkit-animation: bump 1.5s infinite;
  162.     -webkit-animation-delay: 0.2s;
  163.     -moz-animation: bump 1.5s infinite;
  164.     -moz-animation-delay: 0.2s;
  165.     animation: bump 1.5s infinite;
  166.     animation-delay: 0.2s;
  167. }
  168. ul li:nth-child(2) div {
  169.     -webkit-border-radius: 22px;
  170.     -moz-border-radius: 22px;
  171.     -ms-border-radius: 22px;
  172.     -o-border-radius: 22px;
  173.     border-radius: 22px;
  174.     -webkit-transform-origin: center;
  175.     -moz-transform-origin: center;
  176.     transform-origin: center;
  177.     positionabsolute;
  178.     height60px;
  179.     width80px;
  180.     -webkit-animation: spin 0.4s infinite;
  181.     -moz-animation: spin 0.4s infinite;
  182.     -o-animation: spin 0.4s infinite;
  183.     -webkit-animation: spin 0.4s infinite;
  184.     -webkit-animation-delay: 0.2s;
  185.     -moz-animation: spin 0.4s infinite;
  186.     -moz-animation-delay: 0.2s;
  187.     animation: spin 0.4s infinite;
  188.     animation-delay: 0.2s;
  189.     background-color: rgba(120, 0, 0, 0.3);
  190. }
  191. ul li:nth-child(3) {
  192.     -webkit-animation: bump 1.5s infinite;
  193.     -moz-animation: bump 1.5s infinite;
  194.     -o-animation: bump 1.5s infinite;
  195.     -webkit-animation: bump 1.5s infinite;
  196.     -webkit-animation-delay: 0.3s;
  197.     -moz-animation: bump 1.5s infinite;
  198.     -moz-animation-delay: 0.3s;
  199.     animation: bump 1.5s infinite;
  200.     animation-delay: 0.3s;
  201. }
  202. ul li:nth-child(3) div {
  203.     -webkit-border-radius: 22px;
  204.     -moz-border-radius: 22px;
  205.     -ms-border-radius: 22px;
  206.     -o-border-radius: 22px;
  207.     border-radius: 22px;
  208.     -webkit-transform-origin: center;
  209.     -moz-transform-origin: center;
  210.     transform-origin: center;
  211.     positionabsolute;
  212.     height60px;
  213.     width80px;
  214.     -webkit-animation: spin 0.4s infinite;
  215.     -moz-animation: spin 0.4s infinite;
  216.     -o-animation: spin 0.4s infinite;
  217.     -webkit-animation: spin 0.4s infinite;
  218.     -webkit-animation-delay: 0.3s;
  219.     -moz-animation: spin 0.4s infinite;
  220.     -moz-animation-delay: 0.3s;
  221.     animation: spin 0.4s infinite;
  222.     animation-delay: 0.3s;
  223.     background-color: rgba(120, 120, 0, 0.3);
  224. }
  225. ul li:nth-child(4) {
  226.     -webkit-animation: bump 1.5s infinite;
  227.     -moz-animation: bump 1.5s infinite;
  228.     -o-animation: bump 1.5s infinite;
  229.     -webkit-animation: bump 1.5s infinite;
  230.     -webkit-animation-delay: 0.4s;
  231.     -moz-animation: bump 1.5s infinite;
  232.     -moz-animation-delay: 0.4s;
  233.     animation: bump 1.5s infinite;
  234.     animation-delay: 0.4s;
  235. }
  236. ul li:nth-child(4) div {
  237.     -webkit-border-radius: 22px;
  238.     -moz-border-radius: 22px;
  239.     -ms-border-radius: 22px;
  240.     -o-border-radius: 22px;
  241.     border-radius: 22px;
  242.     -webkit-transform-origin: center;
  243.     -moz-transform-origin: center;
  244.     transform-origin: center;
  245.     positionabsolute;
  246.     height60px;
  247.     width80px;
  248.     -webkit-animation: spin 0.4s infinite;
  249.     -moz-animation: spin 0.4s infinite;
  250.     -o-animation: spin 0.4s infinite;
  251.     -webkit-animation: spin 0.4s infinite;
  252.     -webkit-animation-delay: 0.4s;
  253.     -moz-animation: spin 0.4s infinite;
  254.     -moz-animation-delay: 0.4s;
  255.     animation: spin 0.4s infinite;
  256.     animation-delay: 0.4s;
  257.     background-color: rgba(0, 120, 0, 0.3);
  258. }
  259. ul li:nth-child(5) {
  260.     -webkit-animation: bump 1.5s infinite;
  261.     -moz-animation: bump 1.5s infinite;
  262.     -o-animation: bump 1.5s infinite;
  263.     -webkit-animation: bump 1.5s infinite;
  264.     -webkit-animation-delay: 0.5s;
  265.     -moz-animation: bump 1.5s infinite;
  266.     -moz-animation-delay: 0.5s;
  267.     animation: bump 1.5s infinite;
  268.     animation-delay: 0.5s;
  269. }
  270. ul li:nth-child(5) div {
  271.     -webkit-border-radius: 22px;
  272.     -moz-border-radius: 22px;
  273.     -ms-border-radius: 22px;
  274.     -o-border-radius: 22px;
  275.     border-radius: 22px;
  276.     -webkit-transform-origin: center;
  277.     -moz-transform-origin: center;
  278.     transform-origin: center;
  279.     positionabsolute;
  280.     height60px;
  281.     width80px;
  282.     -webkit-animation: spin 0.4s infinite;
  283.     -moz-animation: spin 0.4s infinite;
  284.     -o-animation: spin 0.4s infinite;
  285.     -webkit-animation: spin 0.4s infinite;
  286.     -webkit-animation-delay: 0.5s;
  287.     -moz-animation: spin 0.4s infinite;
  288.     -moz-animation-delay: 0.5s;
  289.     animation: spin 0.4s infinite;
  290.     animation-delay: 0.5s;
  291.     background-color: rgba(0, 120, 120, 0.3);
  292. }
  293. ul li:nth-child(6) {
  294.     -webkit-animation: bump 1.5s infinite;
  295.     -moz-animation: bump 1.5s infinite;
  296.     -o-animation: bump 1.5s infinite;
  297.     -webkit-animation: bump 1.5s infinite;
  298.     -webkit-animation-delay: 0.6s;
  299.     -moz-animation: bump 1.5s infinite;
  300.     -moz-animation-delay: 0.6s;
  301.     animation: bump 1.5s infinite;
  302.     animation-delay: 0.6s;
  303. }
  304. ul li:nth-child(6) div {
  305.     -webkit-border-radius: 22px;
  306.     -moz-border-radius: 22px;
  307.     -ms-border-radius: 22px;
  308.     -o-border-radius: 22px;
  309.     border-radius: 22px;
  310.     -webkit-transform-origin: center;
  311.     -moz-transform-origin: center;
  312.     transform-origin: center;
  313.     positionabsolute;
  314.     height60px;
  315.     width80px;
  316.     -webkit-animation: spin 0.4s infinite;
  317.     -moz-animation: spin 0.4s infinite;
  318.     -o-animation: spin 0.4s infinite;
  319.     -webkit-animation: spin 0.4s infinite;
  320.     -webkit-animation-delay: 0.6s;
  321.     -moz-animation: spin 0.4s infinite;
  322.     -moz-animation-delay: 0.6s;
  323.     animation: spin 0.4s infinite;
  324.     animation-delay: 0.6s;
  325.     background-color: rgba(0, 0, 120, 0.3);
  326. }
  327. ul li:nth-child(7) {
  328.     -webkit-animation: bump 1.5s infinite;
  329.     -moz-animation: bump 1.5s infinite;
  330.     -o-animation: bump 1.5s infinite;
  331.     -webkit-animation: bump 1.5s infinite;
  332.     -webkit-animation-delay: 0.7s;
  333.     -moz-animation: bump 1.5s infinite;
  334.     -moz-animation-delay: 0.7s;
  335.     animation: bump 1.5s infinite;
  336.     animation-delay: 0.7s;
  337. }
  338. ul li:nth-child(7) div {
  339.     -webkit-border-radius: 22px;
  340.     -moz-border-radius: 22px;
  341.     -ms-border-radius: 22px;
  342.     -o-border-radius: 22px;
  343.     border-radius: 22px;
  344.     -webkit-transform-origin: center;
  345.     -moz-transform-origin: center;
  346.     transform-origin: center;
  347.     positionabsolute;
  348.     height60px;
  349.     width80px;
  350.     -webkit-animation: spin 0.4s infinite;
  351.     -moz-animation: spin 0.4s infinite;
  352.     -o-animation: spin 0.4s infinite;
  353.     -webkit-animation: spin 0.4s infinite;
  354.     -webkit-animation-delay: 0.7s;
  355.     -moz-animation: spin 0.4s infinite;
  356.     -moz-animation-delay: 0.7s;
  357.     animation: spin 0.4s infinite;
  358.     animation-delay: 0.7s;
  359.     background-color: rgba(120, 0, 120, 0.3);
  360. }

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

墨丶水瓶

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: