關於html5和css3的時鐘應用在之前我們已經分享過不少了，還有一些html5的日期選擇應用。今天我們要分享一款基於html5和css3的圓盤秒錶動畫，秒錶可以精確到0.001秒，並且可以在計時過程中暫停計時，同時秒錶可以隨時重置。
下面來分析一下實現的源**，主要由html和css**組成，css相對比較複雜，因為涉及到動畫。
html**：
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
:1 2 3 4 5
1 2 3 4 5 6 7 8 9
:1 2 3 4 5
1 2 3 4 5 6 7 8 9
:1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9
複製**
這裡主要是定義了圓盤時鐘的基本結構，以及開始、暫停和復位按鈕。接下來重點是css**：
css**：
首先來定義一些動畫：
@-webkit-keyframes start_haptic to {}}
@-webkit-keyframes stop_haptic to {}}
@-webkit-keyframes reset_haptic to {}}
@-webkit-keyframes launch to {}}
@-webkit-keyframes info to {}}
@-webkit-keyframes menu to {}}
@-webkit-keyframes reset 60% 70% 80%to }
@-webkit-keyframes arrow to}
@-webkit-keyframes secto}
@-webkit-keyframes sec1to}
複製**
再將這些動畫在各個按鈕被啟用時啟用這些動畫：
.start:checked~.container .mil0
.stop:checked~.container .mil0
.start:checked~.container .mil
.stop:checked~.container .mil
.start:checked~.container .mil1
.stop:checked~.container .mil1
.reset:checked~.container .mil1
.reset:checked~.container .mil0
.reset:checked~.container .mil
.start:checked~.container .sec
.stop:checked~.container .sec
.reset:checked~.container .sec
.start:checked~.container .sec1
.stop:checked~.container .sec1
.reset:checked~.container .sec1
.start:checked~.container .min
.stop:checked~.container .min
.reset:checked~.container .min
.start:checked~.container .min1
.stop:checked~.container .min1
.reset:checked~.container .min1
.start:checked~.container .arrow
.stop:checked~.container .arrow
.reset:checked~.container .arrow
.controls
.stop_,.start_
複製**
HTML5 動畫演示
01 02 htmllang en 03 head 04 metacharset utf 8 05 title animations in html5 using the canvas element 06 script 07 08 body 09 canvasid canvas width 100...
HTML5載入動畫
之前我們分享過很多基於css3的loading載入動畫，通過css3的高階特性，可以製作出形態各異的loading載入動畫元件。今天給大家帶來的這款loading載入動畫是基於html5 canvas的，在canvas畫布上，我們動態繪製許多多邊形，這些多邊形伴隨著顏色的隨機變化和旋轉，形成了奇幻色...
HTML5 小動畫例子
gif 錄製可能有一些失幀，不過還是放出來看一下吧。這個效果做起來挺簡單的。這裡用到了幾個小動畫 1.寶劍從上面垂直插下來。思路 先設定寶劍元素在螢幕上方，即修改y的值，也可以通過修改margin top來實現 2.尋 字掉下來並且旋轉。思路 修改旋轉角度和y或margin top 3.標題變大再縮...