至今HTML5中国已经为大家分享过几百种基于CSS3的Loading加载动画，效果酷炫代码简洁，非常值得学习借鉴;今天就先给大家分享两个常用的CSS3的Loading的案例。


第一种效果：

HTML部分

<divclass="loading"><span></span><span></span><span></span><span></span><span></span></div>CSS3部分

.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部分

<divclass="loadEffect"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>CSS3部分

.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;right:14px;-webkit-animation-delay:0.52s;}.loadEffectspan:nth-child(5){right:0;top:50%;margin-top:-8px;-webkit-animation-delay:0.65s;}.loadEffectspan:nth-child(6){right:14px;bottom:14px;-webkit-animation-delay:0.78s;}.loadEffectspan:nth-child(7){bottom:0;left:50%;margin-left:-8px;-webkit-animation-delay:0.91s;}.loadEffectspan:nth-child(8){bottom:14px;left:14px;-webkit-animation-delay:1.04s;}

上面这两个都是大家常用的加载效果，下面的就不依依的现实代码了，有需要的小伙伴请点击小月博客！

======================================

更多资源请点击：http://www.aliyue.net

=======================================



更多效果如下所示：

第三种loading效果

第四种loading效果

第五种loading效果

第六种loading效果

第七种loading效果

这些效果都是用CSS3实现的，是不是很厉害，想要学习的小伙伴记得给我留言哦！如果大家有更牛气的效果记得偷偷的发给我哦！