css3预加载-跳舞的圆点

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

效果如图，很实用。代码通俗易懂。

css：

<style>  

1. @-webkit-keyframes dancing-dots-jump {  

2.   0% { top: 0; }  

3.   55% { top: 0; }  

4.   60% { top: -10px; }  

5.   80% { top: 3px; }  

6.   90% { top: -2px; }  

7.   95% { top: 1px; }  

8.   100% { top: 0; }  

9. }    

10. span.jumping-dots > span {  

11.   -webkit-animation: dancing-dots-jump 1800ms infinite;  

12.   padding: 1px;  

13.   position: relative;  

14. }    

15. span.jumping-dots > span:nth-child(2) {  

16.   -webkit-animation-delay: 100ms;  

17. }  

18. span.jumping-dots > span:nth-child(3) {  

19.   -webkit-animation-delay: 300ms;  

20. }  

21. </style>  

22. html：

23. 加载中

24. <span class="jumping-dots">

25.            <span>.</span>

26.            <span>.</span>

27.            <span>.</span>

28. </span>