首页 > 代码库 > HTML5超酷秒表动画 可暂停和重置秒表
HTML5超酷秒表动画 可暂停和重置秒表
关于HTML5和CSS3的时钟应用在之前我们已经分享过不少了，还有一些HTML5的日期选择应用。今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画，秒表可以精确到0.001秒，并且可以在计时过程中暂停计时，同时秒表可以随时重置。
在线演示
下面来分析一下实现的源代码，主要由HTML和CSS代码组成，CSS相对比较复杂，因为涉及到动画。
HTML代码：
<input id="help" name="controls" type="checkbox" /> <input id="settings" name="controls" type="checkbox" /> <input id="orange" name="color" type="radio" /> <input id="green" name="color" type="radio" checked="checked" /> <div> <input id="start" name="controls" type="radio" /> <input id="stop" name="controls" type="radio" /> <input id="reset" name="controls" type="radio" /> <div> <div> <div> </div> </div> <div> <div> <div> 0 1 2 3 4 5 6 7 8 9 </div> </div> <div> <div> 0 1 2 3 4 5 6 7 8 9 </div> </div> <div> : </div> <div> <div> 0 1 2 3 4 5 </div> </div> <div> <div> 0 1 2 3 4 5 6 7 8 9 </div> </div> <div> : </div> <div> <div> 0 1 2 3 4 5 </div> </div> <div> <div> 0 1 2 3 4 5 6 7 8 9 </div> </div> <div> : </div> <div> <div> 0 1 2 3 4 5 6 7 8 9 </div> </div> <div> <div> 0 1 2 3 4 5 6 7 8 9 </div> </div> <div> <div> 0 1 2 3 4 5 6 7 8 9 </div> </div> </div> <div> <label id="haptic" for="stop"> </label> <label id="haptic2" for="start"> </label> <label id="haptic3" for="reset"> </label> </div> </div> </div>
这里主要是定义了圆盘时钟的基本结构，以及开始、暂停和复位按钮。接下来重点是CSS代码：
CSS代码：
首先来定义一些动画：
@-webkit-keyframes start_haptic {from { -webkit-transform:scale(.98)}to {}}@-webkit-keyframes stop_haptic {from { -webkit-transform:scale(.98)}to {}}@-webkit-keyframes reset_haptic {from { -webkit-transform:scale(.98)}to {}}@-webkit-keyframes launch {from { -webkit-transform:scale(1.2); opacity:0} to {}}@-webkit-keyframes info {from { -webkit-transform:scale(.8) translateY(100px); opacity:0} to {}}@-webkit-keyframes menu {from { -webkit-transform:scale(.9) translateY(-50px); opacity:0} to {}}@-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);}}@-webkit-keyframes arrow { from { -webkit-transform: rotateZ(0deg);}to{-webkit-transform: rotateZ(360deg)}}@-webkit-keyframes sec{ from { top:0px;}to{top:-300px;}}@-webkit-keyframes sec1{ from { top:0px;}to{top:-180px;}}
再将这些动画在各个按钮被激活时启用这些动画：
.start:checked~.container .mil0{-webkit-animation-play-state:running;}.stop:checked~.container .mil0{-webkit-animation-play-state:paused;}.start:checked~.container .mil{-webkit-animation-play-state:running;}.stop:checked~.container .mil{-webkit-animation-play-state:paused;}.start:checked~.container .mil1{-webkit-animation-play-state:running;}.stop:checked~.container .mil1{-webkit-animation-play-state:paused;}.reset:checked~.container .mil1{-webkit-animation:none;top:0;transition:.2s;}.reset:checked~.container .mil0{-webkit-animation:none;top:0;transition:.2s;}.reset:checked~.container .mil{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .sec{-webkit-animation-play-state:running;}.stop:checked~.container .sec{-webkit-animation-play-state:paused;}.reset:checked~.container .sec{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .sec1{-webkit-animation-play-state:running;}.stop:checked~.container .sec1{-webkit-animation-play-state:paused;}.reset:checked~.container .sec1{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .min{-webkit-animation-play-state:running;}.stop:checked~.container .min{-webkit-animation-play-state:paused;}.reset:checked~.container .min{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .min1{-webkit-animation-play-state:running;}.stop:checked~.container .min1{-webkit-animation-play-state:paused;}.reset:checked~.container .min1{-webkit-animation:none;top:0;transition:.2s;}.start:checked~.container .arrow{-webkit-animation-play-state:running;}.stop:checked~.container .arrow{-webkit-animation-play-state:paused;}.reset:checked~.container .arrow{-webkit-animation:reset .4s; -webkit-animation-fill-mode:forwards;}.controls{ height:60px;width:200px;margin:0 auto; position:relative; }.stop_,.start_{position:absolute; z-index:3; height:60px; width:80px; left:60px; transition:.2s; background-position:center center;background-repeat:no-repeat;}
最后将源代码一并附上，下载地址>>
HTML5超酷秒表动画 可暂停和重置秒表
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。