CSS3製作載入中loading動畫效果

 常見的loading載入中通常是使用一個gif來實現動畫效果，實際上我們可以使用css3的特性來製作，本文介紹了一種線性載入效果的css3製作方法。

在web開發中經常遇到ajax的載入，那個載入中的表徵圖大家是不是都是用gif製作的呢？
這裡順便一提，有一個定製loader gif的小表徵圖的工具網站，點擊這裡查看

此文中介紹一種線性樣式的載入樣式，點擊這裡查看demo

我們都知道，動畫的本質是一幀一振畫面按順序播放，因此我們就有如下的設計思路：

畫一排五個小圓圈，五個小圓圈總是花1秒時間完成透明度從1到0.1的動畫，但是每個動畫播放時間不同，依次延後0.2秒。

見代碼實現：

首先畫五個小圓圈：

HTML代碼

<div class="loader"><span></span><span></span><span></span><span></span><span></span></div>

CSS代碼

.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;}

其次，我們來定製動畫

CSS代碼

.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;-webkit-animation: loader 1s infinite alternate;-moz-animation: loader 1s infinite alternate;}@-webkit-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}@-moz-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}
最後，我們添加延時動畫的命令：
CSS代碼
.loader span{display: inline-block;vertical-align: middle;width: 10px;height: 10px;background: black;border-radius: 50px;-webkit-animation: loader 1s infinite alternate;-moz-animation: loader 1s infinite alternate;}.loader span:nth-of-type(2) {-webkit-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}.loader span:nth-of-type(3) {-webkit-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}.loader span:nth-of-type(4) {-webkit-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}.loader span:nth-of-type(5) {-webkit-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}@-webkit-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}@-moz-keyframes loader {0% {opacity: 1;}100% {opacity: 0.1;}}
最後完成製作。
如需調整個數、時間也可自行根據原理定製，不過最好保證漸層的時間間隔，如果太慢會讓人感覺載入有氣無力，而太快了又會讓人感覺不適。
 
 
  

   
著作權聲明：自由轉載-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0
   
原文網址：http://soasmeblog.sinaapp.com/posts/46.html