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动画，最后分享一下源代码，下载地址>>
