广州市东樱生物科技有限公司

今天小编跟大家讲解下有关CSS3实现10种Loading效果 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关CSS3实现10种Loading效果 的相关资料，希望小伙伴们看了有所帮助。

用CSS3实现了几种常见的Loading效果，虽然很简单，但还是分享一下，顺便也当是做做笔记……

第1种效果：

代码如下：

XML/HTML Code复制内容到剪贴板 <divclass="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> 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; }

第2种效果：

代码如下：

XML/HTML Code复制内容到剪贴板 <divclass="loading"> <span></span> </div> CSS Code复制内容到剪贴板 .loading{ width:150px; height:4px; border-radius:2px; margin:0auto; margin-top:100px; position:relative; background:lightgreen; -webkit-animation:changeBgColor1.04sease-ininfinitealternate; } .loadingspan{ display:inline-block; width:16px; height:16px; border-radius:50%; background:lightgreen; position:absolute; margin-top:-7px; margin-left:-8px; -webkit-animation:changePosition1.04sease-ininfinitealternate; } @-webkit-keyframeschangeBgColor{ 0%{ background:lightgreen; } 100%{ background:lightblue; } } @-webkit-keyframeschangePosition{ 0%{ background:lightgreen; } 100%{ margin-left:142px; background:lightblue; } }

第3-5种效果：

代码如下：

XML/HTML Code复制内容到剪贴板 <divclass="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>

第3-5种效果的css样式分别为：

CSS Code复制内容到剪贴板 .loading{ width:150px; height:15px; margin:0auto; position:relative; margin-top:100px; } .loadingspan{ position:absolute; width:15px; height:100%; border-radius:50%; background:lightgreen; -webkit-animation:load1.04sease-ininfinitealternate; } @-webkit-keyframesload{ 0%{ opacity:1; -webkit-transform:translate(0px); } 100%{ opacity:0.2; -webkit-transform:translate(150px); } } .loadingspan:nth-child(1){ -webkit-animation-delay:0.13s; } .loadingspan:nth-child(2){ -webkit-animation-delay:0.26s; } .loadingspan:nth-child(3){ -webkit-animation-delay:0.39s; } .loadingspan:nth-child(4){ -webkit-animation-delay:0.52s; } .loadingspan:nth-child(5){ -webkit-animation-delay:0.65s; }

第6-8种效果：

代码如下：

XML/HTML Code复制内容到剪贴板 <divclass="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div>

第6-8种效果的css样式分别为：

CSS Code复制内容到剪贴板 .loading{ width:150px; height:15px; margin:0auto; margin-top:100px; text-align:center; } .loadingspan{ display:inline-block; width:15px; height:100%; margin-right:5px; background:lightgreen; -webkit-animation:load1.04seaseinfinite; } .loadingspan:last-child{ margin-right:0px; } @-webkit-keyframesload{ 0%{ opacity:1; } 100%{ opacity:0; } } .loadingspan:nth-child(1){ -webkit-animation-delay:0.13s; } .loadingspan:nth-child(2){ -webkit-animation-delay:0.26s; } .loadingspan:nth-child(3){ -webkit-animation-delay:0.39s; } .loadingspan:nth-child(4){ -webkit-animation-delay:0.52s; } .loadingspan:nth-child(5){ -webkit-animation-delay:0.65s; }

第9-10种效果：

代码如下：

XML/HTML Code复制内容到剪贴板 <divclass="loadEffect"> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> <span></span> </div>

CSS样式分别为：

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; }

PS：CSS样式代码其实很多重复，主要就是动画不一样，但为了方便以后直接拿来用，就先不整理了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持爱蒂网。

本文链接：http://www.cnblogs.com/jr1993/p/4622039.html

来源：爱蒂网