原文:
css 實現載入動畫之五-光碟旋轉
1. 先看截圖
2. **實現思路
2.1 首先還是定義四個元素，元素的中心為這四個元素組成的圓的圓心。這樣定義的目的可以保證元素拼湊成乙個正圓。
2.2 在單個元素的頭尾各定義乙個子元素，子元素旋轉一定的角度，使其平行排列，中間剛好留乙個正圓的位置。這裡用了rotate和translate屬性，沒有用skew屬性，是因為skew方法會使元素拉伸後變小。
2.3 將每個元素的子元素都定義不同的背景色，定義完成後，會形成8個不同的顏色排列，此時元素的形狀已經產生了。需要注意的是，最後乙個元素需要裁剪切，因為有可能會覆蓋第乙個元素。案例中第4，8個子元素是分開寫的。
2.4 此時在圓心位置定義乙個圓，圓的大小剛好覆蓋中間的空隙位置。外層容器也設為乙個圓，大小為能全部顯示所有的背景顏色，多餘的部分截斷隱藏。
2.5 定義動畫，並在外層容器上應用這個動畫。這個動畫的方式比較簡單，就是旋轉，直接使用rotate即可。
3. 源**
>css3實現載入的動畫效果5
title
>
6<
meta
name
="author"
content
="rainna"
/>
7<
meta
name
="keywords"
content
="rainna's css lib"
/>
8<
meta
name
="description"
content
="css3"
/>
9<
style
>10*
11body
1213
.m-load
1415
/** 載入動畫的靜態樣式 *
*/16
.m-load2
17.m-load2 .item
18.m-load2 .item:nth-child(2)
19.m-load2 .item:nth-child(3)
20.m-load2 .item:nth-child(4)
21.m-load2 .item:nth-child(5)
22.m-load2 .item:before,.m-load2 .item:after
23.m-load2 .item:before
24.m-load2 .item:after
25.m-load2 .item:nth-child(1):before
26.m-load2 .item:nth-child(1):after
27.m-load2 .item:nth-child(2):before
28.m-load2 .item:nth-child(2):after
29.m-load2 .item:nth-child(3):before
30.m-load2 .item:nth-child(3):after
31.m-load2 .item:nth-child(4):before
32.m-load2 .item:nth-child(5):after
3334
.m-load2 .point
3536
/** 載入動畫 *
*/37
@-webkit-keyframes load39}
40.m-load2
41style
>
42head
>
4344
<
body
>
45<
div
class
="m-load"
>
div>
4647
<
div
class
="m-load2"
>
48<
div
class
="item"
>
div>
49<
div
class
="item"
>
div>
50<
div
class
="item"
>
div>
51<
div
class
="item"
>
div>
52<
div
class
="item"
>
div>
53<
div
class
="point"
>
div>
54div
>
55body
>
56html
>
CSS實現彈簧效果的旋轉載入動畫
先看看效果，像是彈簧在伸縮 具體 此處用到css3的transform屬性。css3的變形 transform 屬性讓元素在乙個座標系統中變形。這個屬性包含一系列變形函式，可以移動 旋轉和縮放元素。transform屬性可用於內聯元素和塊元素。其預設值為none，表示不元素不進行變形。transfo...
CSS3動畫之旋轉小魔方
利用css3動畫特性的小例子 doctype html en utf 8 viewport content width device width,initial scale 1.0 x ua compatible content ie edge document title width 300px ...
CSS3實現載入小點點動畫
button load keyframes change 50 75 載入 load timing function steps 一開始在使用css3的時候並沒有太注意這個timing function，只是注意到自定義貝塞爾曲線。1.第乙個引數指定了時間函式中的間隔數量 必須是正整數 這個間隔數量...