2款不同样式的CSS3 Loading加载动画 附源码

我们经常看到的Loading加载很多都是转圈圈的那种，今天我们来换一种有创意的CSS3 Loading加载动画，一种是声波形状的动画，另一种是折线弯曲的动画，它们实现起来也非常简单，先来看看效果图：





看起来还挺特别的吧。。

另外你也可以在这里看到这个Loading动画的DEMO演示

接下来我们来看看如何用CSS3来实现这2款特别的Loading动画的。

首先是HTML代码，构造了2个Loading容器：

这是第一个：

<div style="height:80px;"></div>

<!--colorful pulse-->
<div id="colorfulPulse">
<span class="item-1"></span>
<span class="item-2"></span>
<span class="item-3"></span>
<span class="item-4"></span>
<span class="item-5"></span>
<span class="item-6"></span>
<span class="item-7"></span>
</div>

这是第二个：

<div style="height:80px;"></div>

<!--pulse wave-->
<div id="container">
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>
<div class="stick"></div>

<h1>Loading...</h1>

</div>

接下来就是核心CSS3代码，对于第一个，先是定义了7条竖线，然后对每条竖线应用名为scale的动画：

#colorfulPulse span {
display: inline-block;
width: 10px;
height: 40px;
animation-name: scale;
-webkit-animation-name: scale;
-moz-animation-name: scale;
-ms-animation-name: scale;
-o-animation-name: scale;
animation-duration: 1.2s;
-webkit-animation-duration: 1.2s;
-moz-animation-duration: 1.2s;
-ms-animation-duration: 1.2s;
-o-animation-duration: 1.2s;
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
span.item-1 {
background: #2ecc71;
}
span.item-2 {
background: #3498db;
}
span.item-3 {
background: #9b59b6;
}
span.item-4 {
background: #e67e22;
}
span.item-5 {
background: #c0392b;
}
span.item-6 {
background: #e74c3c;
}
span.item-7 {
background: #e74c8c;
}

.item-1 {
animation-delay: -1s;
-webkit-animation-delay: -1s;
-moz-animation-delay: -1s;
-ms-animation-delay: -1s;
-o-animation-delay: -1s;
}

.item-2 {
animation-delay: -0.9s;
-webkit-animation-delay: -0.9s;
-moz-animation-delay: -0.9s;
-ms-animation-delay: -0.9s;
-o-animation-delay: -0.9s;
}

.item-3 {
animation-delay: -0.8s;
-webkit-animation-delay: -0.8s;
-moz-animation-delay: -0.8s;
-ms-animation-delay: -0.8s;
-o-animation-delay: -0.8s;
}

.item-4 {
animation-delay: -0.7s;
-webkit-animation-delay: -0.7s;
-moz-animation-delay: -0.7s;
-ms-animation-delay: -0.7s;
-o-animation-delay: -0.7s;
}

.item-5 {
animation-delay: -0.6s;
-webkit-animation-delay: -0.6s;
-moz-animation-delay: -0.6s;
-ms-animation-delay: -0.6s;
-o-animation-delay: -0.6s;
}

.item-6 {
animation-delay: -0.5s;
-webkit-animation-delay: -0.5s;
-moz-animation-delay: -0.5s;
-ms-animation-delay: -0.5s;
-o-animation-delay: -0.5s;
}

.item-7 {
animation-delay: -0.4s;
-webkit-animation-delay: -0.4s;
-moz-animation-delay: -0.4s;
-ms-animation-delay: -0.4s;
-o-animation-delay: -0.4s;
}

@-webkit-keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}

20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}

20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-ms-keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}

20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes scale {
0%, 40%, 100% {
-moz-transform: scaleY(0.2);
-ms-transform: scaleY(0.2);
-o-transform: scaleY(0.2);
-webkit-transform: scaleY(0.2);
transform: scaleY(0.2);
}

20%, 60% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}

对于第二个Loading动画，也是定义了6条横线，对3条应用名为rise的动画，对另外3条应用名为fall的动画，另外对Loading文字应用名为fade的动画，从而达到波浪形的效果，具体CSS代码如下：

.stick:nth-child(n) {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
/* Safari and Chrome */
-moz-transform: rotate(30deg);
-webkit-animation: fall 2s infinite;
-moz-animation: fall 2s infinite;
}

.stick:nth-child(2n) {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
/* Safari and Chrome */
-moz-transform: rotate(-30deg);
-webkit-animation: rise 2s infinite;
-moz-animation: rise 2s infinite;
}

@-webkit-keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
}
@-moz-keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
}
@-o-keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}

@keyframes rise {
50% {
transform: rotate(30deg);
-ms-transform: rotate(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
}
}
@-webkit-keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(30deg);
}
}
@-moz-keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
}
}
@-o-keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(30deg);
}

@keyframes fall {
50% {
transform: rotate(-30deg);
-ms-transform: rotate(-30deg);
/* IE 9 */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(30deg);
}
}
}
@-webkit-keyframes fade {
50% {
opacity: 0.5;
}

100% {
opacity: 1;
}
}
@-moz-keyframes fade {
50% {
opacity: 0.5;
}

100% {
opacity: 1;
}
}
@-o-keyframes fade {
50% {
opacity: 0.5;
}

100% {
opacity: 1;
}

@keyframes fade {
50% {
opacity: 0.5;
}

100% {
opacity: 1;
}
}
}

这样我们就完成了这个Loading动画，最后分享一下源代码，下载地址>>