简单的css3预加载demo-跳舞的圆点

整理东西的时候在谷歌浏览器打印页面时候发现的一个有趣的css3效果,就照着写了下来,原理很简单,代码通俗易懂

效果

加载中...

源码

  1. <style>  
  2. @-webkit-keyframes dancing-dots-jump {  
  3.   0% { top: 0; }  
  4.   55% { top: 0; }  
  5.   60% { top: -10px; }  
  6.   80% { top3px; }  
  7.   90% { top: -2px; }  
  8.   95% { top1px; }  
  9.   100% { top: 0; }  
  10. }  
  11.   
  12. span.jumping-dots > span {  
  13.   -webkit-animation: dancing-dots-jump 1800ms infinite;  
  14.   padding1px;  
  15.   positionrelative;  
  16. }  
  17.   
  18. span.jumping-dots > span:nth-child(2) {  
  19.   -webkit-animation-delay: 100ms;  
  20. }  
  21.   
  22. span.jumping-dots > span:nth-child(3) {  
  23.   -webkit-animation-delay: 300ms;  
  24. }  
  25. </style>  
  1. 加载中<span class="jumping-dots"><span>.</span><span>.</span><span>.</span></span>  
虚拟主机
《JavaScript从入门到精通》PDF
《JavaScript权威指南(第6版)(中文版)》PDF
《你不知道的JavaScript(中卷)》PDF
《HTML5 权威指南》PDF
广告也精彩