HTML5超酷秒表动画可暂停和重置秒表

悠悠 2022-08-07 06:39 225阅读 0赞

关于[HTML5][]和[CSS3][]的时钟[应用][Link 1]在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。

![11.png][]

下面来分析一下实现的源代码，主要由HTML和CSS代码组成，CSS相对比较复杂，因为涉及到动画。  
  
  
HTML代码：

1.  <input id="help" name="controls" type="checkbox" />  
    
2.    <input id="settings" name="controls" type="checkbox" />  
    
3.    
    
4.    <input id="orange"  name="color" type="radio"  />  
    
5.    <input id="green"  name="color" type="radio" checked="checked" />  
    
6.    
    
7.    <div>  
    
8.    
    
9.      <input id="start" name="controls" type="radio" />  
    
10.     <input id="stop" name="controls" type="radio" />  
    
11.     <input id="reset" name="controls" type="radio" />  
    
12.   
    
13.     <div>  
    
14.       <div>  
    
15.         <div>  
    
16.         </div>  
    
17.       </div>  
    
18.   
    
19.       <div>  
    
20.         <div>  
    
21.           <div>  
    
22. 1 2 3 4 5 6 7 8 9  
    
23.           </div>  
    
24.         </div>  
    
25.         <div>  
    
26.           <div>  
    
27. 1 2 3 4 5 6 7 8 9  
    
28.           </div>  
    
29.         </div>  
    
30.         <div>  
    
31.           :  
    
32.         </div>  
    
33.   
    
34.         <div>  
    
35.           <div>  
    
36. 1 2 3 4 5  
    
37.           </div>  
    
38.         </div>  
    
39.         <div>  
    
40.           <div>  
    
41. 1 2 3 4 5 6 7 8 9  
    
42.           </div>  
    
43.         </div>  
    
44.         <div>  
    
45.           :  
    
46.         </div>  
    
47.   
    
48.         <div>  
    
49.           <div>  
    
50. 1 2 3 4 5  
    
51.           </div>  
    
52.         </div>  
    
53.         <div>  
    
54.           <div>  
    
55. 1 2 3 4 5 6 7 8 9  
    
56.           </div>  
    
57.         </div>  
    
58.         <div>  
    
59.           :  
    
60.         </div>  
    
61.   
    
62.         <div>  
    
63.           <div>  
    
64. 1 2 3 4 5 6 7 8 9  
    
65.           </div>  
    
66.         </div>  
    
67.         <div>  
    
68.           <div>  
    
69. 1 2 3 4 5 6 7 8 9  
    
70.           </div>  
    
71.         </div>  
    
72.         <div>  
    
73.           <div>  
    
74. 1 2 3 4 5 6 7 8 9  
    
75.           </div>  
    
76.         </div>  
    
77.   
    
78.       </div>  
    
79.   
    
80.       <div>  
    
81.         <label id="haptic" for="stop">  
    
82.         </label>  
    
83.         <label id="haptic2" for="start">  
    
84.         </label>  
    
85.         <label id="haptic3" for="reset">  
    
86.         </label>  
    
87.   
    
88.       </div>  
    
89.   
    
90.     </div>  
    
91.   
    
92.   </div>

复制代码

这里主要是定义了圆盘时钟的基本结构，以及开始、暂停和复位按钮。接下来重点是CSS代码：  
  
  
CSS代码：  
  
  
首先来定义一些动画：

1.  @-webkit-keyframes start\_haptic \{from \{ -webkit-transform:scale(.98)\}to \{\}\}  
    
2.  @-webkit-keyframes stop\_haptic \{from \{ -webkit-transform:scale(.98)\}to \{\}\}  
    
3.  @-webkit-keyframes reset\_haptic \{from \{ -webkit-transform:scale(.98)\}to \{\}\}  
    
4.    
    
5.  @-webkit-keyframes launch \{from \{ -webkit-transform:scale(1.2); opacity:0\} to \{\}\}  
    
6.  @-webkit-keyframes info \{from \{ -webkit-transform:scale(.8) translateY(100px); opacity:0\} to \{\}\}  
    
7.  @-webkit-keyframes menu \{from \{ -webkit-transform:scale(.9) translateY(-50px); opacity:0\} to \{\}\}  
    
8.    
    
9.  @-webkit-keyframes reset \{from \{-webkit-transform:rotateZ(180deg);\} 60%\{ -webkit-transform:rotateZ(-30deg);\} 70%\{ -webkit-transform:rotateZ(10deg);\} 80%\{ -webkit-transform:rotateZ(-10deg);\}to \{ -webkit-transform:rotateZ(0);\}\}  
    
10.   
    
11. @-webkit-keyframes arrow \{ from  \{ -webkit-transform: rotateZ(0deg);\}to\{-webkit-transform: rotateZ(360deg)\}\}  
    
12. @-webkit-keyframes sec\{ from  \{ top:0px;\}to\{top:-300px;\}\}  
    
13. @-webkit-keyframes sec1\{ from  \{ top:0px;\}to\{top:-180px;\}\}

复制代码

再将这些动画在各个按钮被激活时启用这些动画：

1.  .start:checked~.container .mil0\{-webkit-animation-play-state:running;\}  
    
2.  .stop:checked~.container .mil0\{-webkit-animation-play-state:paused;\}  
    
3.  .start:checked~.container .mil\{-webkit-animation-play-state:running;\}  
    
4.    
    
5.  .stop:checked~.container .mil\{-webkit-animation-play-state:paused;\}  
    
6.  .start:checked~.container .mil1\{-webkit-animation-play-state:running;\}  
    
7.  .stop:checked~.container .mil1\{-webkit-animation-play-state:paused;\}  
    
8.    
    
9.  .reset:checked~.container .mil1\{-webkit-animation:none;top:0;transition:.2s;\}  
    
10. .reset:checked~.container .mil0\{-webkit-animation:none;top:0;transition:.2s;\}  
    
11. .reset:checked~.container .mil\{-webkit-animation:none;top:0;transition:.2s;\}  
    
12.   
    
13. .start:checked~.container .sec\{-webkit-animation-play-state:running;\}  
    
14. .stop:checked~.container .sec\{-webkit-animation-play-state:paused;\}  
    
15. .reset:checked~.container .sec\{-webkit-animation:none;top:0;transition:.2s;\}  
    
16.   
    
17. .start:checked~.container .sec1\{-webkit-animation-play-state:running;\}  
    
18. .stop:checked~.container .sec1\{-webkit-animation-play-state:paused;\}  
    
19. .reset:checked~.container .sec1\{-webkit-animation:none;top:0;transition:.2s;\}  
    
20.   
    
21. .start:checked~.container .min\{-webkit-animation-play-state:running;\}  
    
22. .stop:checked~.container .min\{-webkit-animation-play-state:paused;\}  
    
23. .reset:checked~.container .min\{-webkit-animation:none;top:0;transition:.2s;\}  
    
24.   
    
25. .start:checked~.container .min1\{-webkit-animation-play-state:running;\}  
    
26. .stop:checked~.container .min1\{-webkit-animation-play-state:paused;\}  
    
27. .reset:checked~.container .min1\{-webkit-animation:none;top:0;transition:.2s;\}  
    
28.   
    
29. .start:checked~.container .arrow\{-webkit-animation-play-state:running;\}  
    
30. .stop:checked~.container .arrow\{-webkit-animation-play-state:paused;\}  
    
31. .reset:checked~.container .arrow\{-webkit-animation:reset  .4s; -webkit-animation-fill-mode:forwards;\}  
    
32.   
    
33. .controls\{ height:60px;width:200px;margin:0 auto;  position:relative;  \}  
    
34.   
    
35. .stop\_,.start\_\{position:absolute; z-index:3; height:60px; width:80px; left:60px; transition:.2s; background-position:center center;background-repeat:no-repeat;\}

复制代码

[HTML5]: http://www.html5cn.org/
[CSS3]: http://www.html5cn.org/portal.php?mod=list&catid=16
[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=20
[11.png]: http://bbs.html5cn.org/data/attachment/forum/201410/08/095743gbg9pg6kjzgoo8j9.png