隨著蘋果表的大量生產，我想，用css來實現撥號動畫的時候到了。
在這篇文章中，我們將使用keyframe動畫和一點小技巧來實現蘋果標表盤進度條動畫。
表的動畫是由3個線條構成的，每個都是進度條。進度條兩邊帶有圓角。我們將使用一點小技巧來實現。
我們先來畫半個圓。html**如下：
按照往常的做法，我可能會使用css3的div> div>屬性和我們使用border-radius
keyframe來實現半月形狀和旋轉動畫。
.wedge @keyframes rotate }
clip屬性。但是由於瀏覽器核心相容性問題，我決定還是放棄。這裡，我們簡單使用overflow:hidden就夠了。
這裡使用了兩個元素，dial-container的寬度只有wedge的一半，而且它設定了overflow為hidden，容器的位置在半圓的右邊，並旋轉wedge，這樣就出現了扇形效果。
為了畫完整個圓，我們需要建立第二個wedge和第二個container，放在左邊。
並使用下面css來處理它們的位置關係。
執行結果：
下一步是讓wedge變成進度條。我們可以使用偽類在中間畫個圓圈遮蓋掉。
現在看起來有點進度條的樣子了。
蘋果表動畫看起來很柔和還跟它的圓角有關。要建立這樣的圓角，在weget上用css屬性時不行的。不過我們可以使用點小技巧。
start元素和end元素是兩個多餘的元素用來放在進度條的開始和結尾（這樣就生成圓角了！）
.marker .end @keyframes rotate-marker }
end圓設成綠色。並把transform-origin設定成容器中點。
css3的動畫實現
關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...
css3實現動畫效果
transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...
css3的動畫實現
關鍵幀 keyframes 動畫名稱20 40 60 80 100 1 animation name 定義乙個或者多個動畫的名稱 eg demo 2 animation duration 動畫執行的時間 取值 0時，動畫不執行 time 正數 單位為s或者ms animation delay 動畫執...