至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。
第一种效果：
HTML部分
XML/HTML Code复制内容到剪贴板 <divclass="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS3部分
CSS Code复制内容到剪贴板 .loading{ width:80px; height:40px; margin:0auto; margin-top:100px; } .loadingspan{ display:inline-block; width:8px; height:100%; border-radius:4px; background:lightgreen; -webkit-animation:load1seaseinfinite; } @-webkit-keyframesload{ 0%,100%{ height:40px; background:lightgreen; } 50%{ height:70px; margin:-15px0; background:lightblue; } } .loadingspan:nth-child(2){ -webkit-animation-delay:0.2s; } .loadingspan:nth-child(3){ -webkit-animation-delay:0.4s; } .loadingspan:nth-child(4){ -webkit-animation-delay:0.6s; } .loadingspan:nth-child(5){ -webkit-animation-delay:0.8s; }
第二种效果：
HTML部分
XML/HTML Code复制内容到剪贴板 <divclass="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
CSS3部分
CSS Code复制内容到剪贴板 .loadEffect{ width:100px; height:100px; position:relative; margin:0auto; margin-top:100px; } .loadEffectspan{ display:inline-block; width:16px; height:16px; border-radius:50%; background:lightgreen; position:absolute; -webkit-animation:load1.04seaseinfinite; } @-webkit-keyframesload{ 0%{ opacity:1; } 100%{ opacity:0.2; } } .loadEffectspan:nth-child(1){ left:0; top:50%; margin-top:-8px; -webkit-animation-delay:0.13s; } .loadEffectspan:nth-child(2){ left:14px; top:14px; -webkit-animation-delay:0.26s; } .loadEffectspan:nth-child(3){ left:50%; top:0; margin-left:-8px; -webkit-animation-delay:0.39s; } .loadEffectspan:nth-child(4){ top:14px; rightright:14px; -webkit-animation-delay:0.52s; } .loadEffectspan:nth-child(5){ rightright:0; top:50%; margin-top:-8px; -webkit-animation-delay:0.65s; } .loadEffectspan:nth-child(6){ rightright:14px; bottombottom:14px; -webkit-animation-delay:0.78s; } .loadEffectspan:nth-child(7){ bottombottom:0; left:50%; margin-left:-8px; -webkit-animation-delay:0.91s; } .loadEffectspan:nth-child(8){ bottombottom:14px; left:14px; -webkit-animation-delay:1.04s; }
上面这两个都是大家常用的加载效果，下面的就不依依的现实代码了，有需要的小伙伴请给我们留言！
更多效果如下所示：
第三种loading效果
第四种loading效果
第五种loading效果
第六种loading效果
第七种loading效果
这些效果都是用CSS3实现的，是不是很厉害，想要学习的小伙伴记得给我留言哦！如果大家有更牛气的效果记得偷偷的发给我哦！
以上这篇CSS3轻松实现清新 Loading 效果的简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持查字典教程网。