首先，什麼是進度條，跟大家舉個例子，我們在瀏覽乙個網頁時，網頁在載入的時候會有乙個進度的提示，這樣能夠準確的告訴我們什麼時候資源可以完全載入出來，最常見的就是乙個圓不斷的旋轉，數字在不斷的增加。
下面我就跟大家簡單介紹一下：
1.首先，學習進度條，並且能夠實現進度條可以運動，例如上面提到的可以旋轉，跳動等等。
2.熟悉並掌握 css3的語法，transfrom 和 animation 的區別和用法
3. 瀏覽器的相容性問題
給大家看乙個
這是乙個進度條，如何實現線條有規律的運動呢
兩者都是定義動畫的前者transform一般用來定義某個物件靜態的進行位置的偏移，準確來說是死的，用translation，rotate來定義物件的具體位置
而animation 一般用來定義乙個動畫組，@keyframes + 動畫名稱（可以任意定義乙個名稱）
例如：
animation
: load 1s infinite;
定義的animation動畫函式:
@keyframes load
20%}
下面具體實現一下:
這是html部分：首先定義乙個大的div（loading）用來包裹裡面的兩個小的div （pic和pic2）pic裡面加上標籤i的塊級元素。
*
#loading
#loading .pic
#loading .pic2
#loading .pic2 span
#loading .pic2 b
#loading .pic i
@-webkit-keyframes load
20%}
@keyframes load
20%}
#loading .pic i:nth-child(1)
#loading .pic i:nth-child(2)
#loading .pic i:nth-child(3)
#loading .pic i:nth-child(4)
#loading .pic i:nth-child(5)
#loading .pic i:nth-child(6)
@-webkit-keyframes load1
to}
最後記得考慮瀏覽器的相容問題
如何用css3實現簡單旋轉的風車
如何用css3實現簡單旋轉的風車 在dw中想要實現旋轉的風車就要使用關鍵幀keyframes來設定旋轉，其實也沒什麼難度的。先設定它的樣式，然後要用定位把它放到合適的位置就可以了。html的 如下 class fengche class zhu div class zhuan class z div...
如何用css3實現switch元件開關的方法
基於表單的checkbox 效果圖原理 checkbox,有兩種狀態,沒選中和選中,當選中的時候 checked 改變樣式即可,首先得清除瀏覽器預設的樣式,apperance none,本文 只在chrome中執行,如果需要寫相容性 給apperance和transition加上字首就好 html ...
如何使用CSS3實現乙個3D相簿
css3系列我已經寫過兩篇文章了，在這貼出鏈結，感興趣的同學可以看一下css3初體驗之奇技淫巧，css3 3d立方體效果 transform也不過如此 第一篇主要列出了一些常用或經典的css3技巧和方法 第二篇是乙個用css3實現的立方體例項，詳細講解了3d旋轉和transform等屬性。本文再來利...