整理东西的时候在谷歌浏览器打印页面时候发现的一个有趣的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>