CSS3制作loading加载动画效果代码

　　在我们这次的新设计教程中，我将向您展示如何创建纯CSS3的loading加载动画组件(没有任何图像)。我认为它可以为你减少项目的代码量和额外的图像对你网站的负载。我准备了三种不同风格的加载组件。现在，让我们看看我做的。

　　css3-loading

　　Step 1. HTML

　　你可以在这里看到的三个元素–放置“加载”元素的div。

代码如下 <div class="main_body">
<div class="element">
<div class="loading1">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="element">
<div class="loading2">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div class="element">
<div class="loading3">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</div>

　　Step 2. CSS

　　现在，最有趣的一步，我会给你风格各加载的元素。欢迎来检查的第一个样式：

代码如下 .loading1 {
height:100px;
position:relative;
width:80px;
}
.loading1 > div {
background-color:#FFFFFF;
height:30px;
position:absolute;
width:12px;

-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;

-webkit-transform:scale(0.4);
-moz-transform:scale(0.4);
-o-transform:scale(0.4);

-webkit-animation-name:loading1;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:loading1;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:loading1;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
}
.loading1 > div:nth-child(1) {
left:0;
top:36px;

-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);

-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
-o-animation-delay:0.39s;
}
.loading1 > div:nth-child(2) {
left:10px;
top:13px;

-webkit-transform:rotate(-45deg);
-moz-transform:rotate(-45deg);
-o-transform:rotate(-45deg);

-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
-o-animation-delay:0.52s;
}
.loading1 > div:nth-child(3) {
left:34px;
top:4px;

-webkit-transform:rotate(0deg);
-moz-transform:rotate(0deg);
-o-transform:rotate(0deg);

-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
-o-animation-delay:0.65s;
}
.loading1 > div:nth-child(4) {
right:10px;
top:13px;

-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);

-webkit-animation-delay:0.78s;
-moz-animation-delay:0.78s;
-o-animation-delay:0.78s;
}
.loading1 > div:nth-child(5) {
right:0;
top:36px;

-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);

-webkit-animation-delay:0.91s;
-moz-animation-delay:0.91s;
-o-animation-delay:0.91s;
}
.loading1 > div:nth-child(6) {
right:10px;
bottom:9px;

-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-o-transform:rotate(135deg);

-webkit-animation-delay:1.04s;
-moz-animation-delay:1.04s;
-o-animation-delay:1.04s;
}
.loading1 > div:nth-child(7) {
bottom:0;
left:34px;

-webkit-transform:rotate(180deg);
-moz-transform:rotate(180deg);
-o-transform:rotate(180deg);

-webkit-animation-delay:1.17s;
-moz-animation-delay:1.17s;
-o-animation-delay:1.17s;
}
.loading1 > div:nth-child(8) {
left:10px;
bottom:9px;

-webkit-transform:rotate(-135deg);
-moz-transform:rotate(-135deg);
-o-transform:rotate(-135deg);

-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.3s;
}

@-webkit-keyframes loading1 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-moz-keyframes loading1 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-o-keyframes loading1 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}

　　你可以看到–我用CSS3动画关键帧，每一步(点)是彼此分离的延迟。现在，请查看我们的第二负载的风格元素：

代码如下 .loading2 {
height:140px;
position:relative;
width:140px;

-webkit-transform:scale(0.6);
-moz-transform:scale(0.6);
-o-transform:scale(0.6);
}
.loading2 > div {
background-color:#FFFFFF;
height:25px;
position:absolute;
width:25px;

-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;

-webkit-animation-name:loading2;
-webkit-animation-duration:1.04s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:loading2;
-moz-animation-duration:1.04s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:loading2;
-o-animation-duration:1.04s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
}
.loading2 > div:nth-child(1) {
left:0;
top:57px;

-webkit-animation-delay:0.39s;
-moz-animation-delay:0.39s;
-o-animation-delay:0.39s;
}
.loading2 > div:nth-child(2) {
left:17px;
top:17px;

-webkit-animation-delay:0.52s;
-moz-animation-delay:0.52s;
-o-animation-delay:0.52s;
}
.loading2 > div:nth-child(3) {
left:57px;
top:0;

-webkit-animation-delay:0.65s;
-moz-animation-delay:0.65s;
-o-animation-delay:0.65s;
}
.loading2 > div:nth-child(4) {
right:17px;
top:17px;

-webkit-animation-delay:0.78s;
-moz-animation-delay:0.78s;
-o-animation-delay:0.78s;
}
.loading2 > div:nth-child(5) {
right:0;
top:57px;

-webkit-animation-delay:0.91s;
-moz-animation-delay:0.91s;
-o-animation-delay:0.91s;
}
.loading2 > div:nth-child(6) {
right:17px;
bottom:17px;

-webkit-animation-delay:1.04s;
-moz-animation-delay:1.04s;
-o-animation-delay:1.04s;
}
.loading2 > div:nth-child(7) {
left:57px;
bottom:0;

-webkit-animation-delay:1.17s;
-moz-animation-delay:1.17s;
-o-animation-delay:1.17s;
}
.loading2 > div:nth-child(8) {
left:17px;
bottom:17px;

-webkit-animation-delay:1.3s;
-moz-animation-delay:1.3s;
-o-animation-delay:1.3s;
}

@-webkit-keyframes loading2 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-moz-keyframes loading2 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}
@-o-keyframes loading2 {
0%{ background-color:#000000 }
100%{ background-color:#FFFFFF }
}

　　我在这里使用相同的理念作为第一要素，但是，稍微改变风格。最后–第三”加载元件：

代码如下 .loading3 > div {
background-color:#FFFFFF;
border:1px solid #000000;
float:left;
height:114px;
margin-left:5px;
width:30px;
opacity:0.1;

-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);

-webkit-animation-name:loading3;
-webkit-animation-duration:1.2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-moz-animation-name:loading3;
-moz-animation-duration:1.2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-o-animation-name:loading3;
-o-animation-duration:1.2s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
}
.loading3 > div:nth-child(1) {

-webkit-animation-delay:0.24s;
-moz-animation-delay:0.24s;
-o-animation-delay:0.24s;
}
.loading3 > div:nth-child(2) {

-webkit-animation-delay:0.48s;
-moz-animation-delay:0.48s;
-o-animation-delay:0.48s;
}
.loading3 > div:nth-child(3) {

-webkit-animation-delay:0.72s;
-moz-animation-delay:0.72s;
-o-animation-delay:0.72s;
}
.loading3 > div:nth-child(4) {

-webkit-animation-delay:0.96s;
-moz-animation-delay:0.96s;
-o-animation-delay:0.96s;
}
.loading3 > div:nth-child(5) {

-webkit-animation-delay:1.2s;
-moz-animation-delay:1.2s;
-o-animation-delay:1.2s;
}

@-webkit-keyframes loading3 {
0% {
-webkit-transform:scale(1.2);
opacity:1;
}
100% {
-webkit-transform:scale(0.7);
opacity:0.1;
}
}
@-moz-keyframes loading3 {
0% {
-moz-transform:scale(1.2);
opacity:1;
}
100% {
-moz-transform:scale(0.7);
opacity:0.1;
}
}
@-o-keyframes loading3 {
0% {
-o-transform:scale(1.2);
opacity:1;
}
100% {
-o-transform:scale(0.7);
opacity:0.1;
}
}

　　这就是今天的。我们刚刚创建的三种不同的“加载”元素。我希望一切都对你很容易和你一样的结果。祝你好运!