CSS3轻松实现清新轻松实现清新 Loading 效果的简单实例效果的简单实例
下面小编就为大家带来一篇CSS3轻松实现清新 Loading 效果的简单实例。小编觉得挺不错的,现在就分享给大
家,也给大家做个参考。一起跟随小编过来看看吧
至今HTML5中国已经为大家分享过几百种基于 CSS3 的Loading加载动画,效果酷炫代码简洁,非常值得学习借鉴;今天就先
给大家分享两个常用的CSS3的Loading的案例。
第一种效果:
HTML部分部分
XML/HTML Code复制内容到剪贴板
1. <div class="loading">
2. <span></span>
3. <span></span>
4. <span></span>
5. <span></span>
6. <span></span>
7. </div>
CSS3部分部分
CSS Code复制内容到剪贴板
1. .loading{
2. width: 80px;
3. height: 40px;
4. margin: 0 auto;
5. margin-top:100px;
6. }
7. .loading span{
8. display: inline-block;
9. width: 8px;
10. height: 100%;
11. border-radius: 4px;
12. background: lightgreen;
13. -webkit-animation: load 1s ease infinite;
14. }
15. @-webkit-keyframes load{
16. 0%,100%{
17. height: 40px;
18. background: lightgreen;
19. }
20. 50%{
21. height: 70px;
22. margin: -15px 0;
23. background: lightblue;
24. }
25. }
26. .loading span:nth-child(2){
27. -webkit-animation-delay:0.2s;
28. }
29. .loading span:nth-child(3){
30. -webkit-animation-delay:0.4s;