由圍成乙個圈的一些小圓點，然後順時針方向，逐個半徑變小，再變大，也就是消失再出現的過程，每個點變小不是同時的，設定相同的時間差，就能形成載入中的視覺效果.
首先，在乙個塊中繪製4個小圓點，為了明顯，先設定一下邊框，後面刪除即可
class
="circlebox"
>
>
p>
>
p>
>
p>
>
p>
div>
然後讓其固定在螢幕正**，再分別將4個點放到邊框4個角上，如圖所示
/*居中顯示*/
.circlebox
/*4個點居於四個角*/
4個點看著太稀疏，我們上面整個框複製一遍，也放在螢幕正**，不需要另外寫太多css**，然後將其旋轉45度,實現下面的效果
/*複製上面的4點環，再旋轉45度*/
去除邊框之後，效果如下
接下來，就是實現圓點相繼變小的過程，我們給所有的圓點設定動畫，使其依次慢慢消失
@keyframes move
50%100%
}
設定時間差
/*設定時間差*/
.circlebox:nth-of-type(1) p:nth-of-type(1)
.circlebox:nth-of-type(2) p:nth-of-type(4)
.circlebox:nth-of-type(1) p:nth-of-type(4)
.circlebox:nth-of-type(2) p:nth-of-type(3)
.circlebox:nth-of-type(1) p:nth-of-type(3)
.circlebox:nth-of-type(2) p:nth-of-type(2)
.circlebox:nth-of-type(1) p:nth-of-type(2)
.circlebox:nth-of-type(2) p:nth-of-type(1)
css3實現簡易loading動畫
css3已經火的不行，我還很淡 dan 定 teng 地在啃著css2,表示很慚愧啊 週末抽點時間看了下loading效果的實現，開始看到css3有點頭大，感覺是不是向外面說的那樣每一次標準的發布都像是在學習一門新語言呢，稱有些惶恐。說完廢話了.開始show doctype html html la...
CSS3 之loading動畫實現思路
效果大致如下 主要實現方式 該效果主要用到animation timing function中的steps 函式，該函式主要用於分步隱藏不同模組。實現思路 第一步動畫 第二步動畫 第三步動畫 第四步動畫 旋轉半圓 將gif動畫分解為四步實現，每一步都是由旋轉半圓旋轉實現動畫效果，再通過steps函式...
CSS3實現Loading載入動畫特效大全
目前大部分web開發載入 loading 特效是採用gif形式展現，隨著html5 css3技術的成熟，純css3版本loading載入動畫效果已經可以比擬gif動畫效果，當然是需要瀏覽器的相容性要好，下面 大頭網 spinner spinner div spinner rect2 spinner ...