用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