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

在线演示

下面来分析一下实现的源代码,主要由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. 0 1 2 3 4 5 6 7 8 9
  23. </div>
  24. </div>
  25. <div>
  26. <div>
  27. 0 1 2 3 4 5 6 7 8 9
  28. </div>
  29. </div>
  30. <div>
  31. :
  32. </div>
  33.  
  34. <div>
  35. <div>
  36. 0 1 2 3 4 5
  37. </div>
  38. </div>
  39. <div>
  40. <div>
  41. 0 1 2 3 4 5 6 7 8 9
  42. </div>
  43. </div>
  44. <div>
  45. :
  46. </div>
  47.  
  48. <div>
  49. <div>
  50. 0 1 2 3 4 5
  51. </div>
  52. </div>
  53. <div>
  54. <div>
  55. 0 1 2 3 4 5 6 7 8 9
  56. </div>
  57. </div>
  58. <div>
  59. :
  60. </div>
  61.  
  62. <div>
  63. <div>
  64. 0 1 2 3 4 5 6 7 8 9
  65. </div>
  66. </div>
  67. <div>
  68. <div>
  69. 0 1 2 3 4 5 6 7 8 9
  70. </div>
  71. </div>
  72. <div>
  73. <div>
  74. 0 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:} to {}}
  6. @-webkit-keyframes info {from { -webkit-transform:scale(.8) translateY(100px); opacity:} to {}}
  7. @-webkit-keyframes menu {from { -webkit-transform:scale(.9) translateY(-50px); opacity:} 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:;transition:.2s;}
  10. .reset:checked~.container .mil0{-webkit-animation:none;top:;transition:.2s;}
  11. .reset:checked~.container .mil{-webkit-animation:none;top:;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:;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:;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:;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:;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:; height:60px; width:80px; left:60px; transition:.2s; background-position:center center;background-repeat:no-repeat;}

最后将源代码一并附上,下载地址>>

HTML5超酷秒表动画 可暂停和重置秒表的更多相关文章

  1. 16款最佳HTML5超酷动画演示及源码

    1.HTML5/CSS3图片选择动画 可选择多张图片 之前我们已经分享过几款很酷的HTML5图片特效,像HTML5 3D图片折叠特效.HTML5 3D旋转图片相册等应用.今天我们来分享一款既炫酷又实用 ...

  2. HTML5/CSS3超酷环形动画菜单

    在线演示 本地下载

  3. 超酷JQuery动画分页按钮,鼠标悬停滑动展开

    1.效果及功能说明 animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮,鼠标离开后分页按钮收缩 2.实现原理 主要是靠动画方法,来让原本的箭头图像的长度发生变长,正好可以融入下标题的文字 ...

  4. 超酷创意HTML5动画演示及代码

    HTML5是未来的网页开发神器,今天分享的这些HTML5动画大部分利用了CSS3的动画属性来实现,废话不多说,直接上演示和代码. HTML5/CSS3实现大风车旋转动画 这次我们要来分享一款很酷的HT ...

  5. 推荐9款使用CSS3实现的超酷动画效果

    大家都知道,在网页制作时使用CSS技术,可以有效地对页面的布局.字体.颜色.背景和其它效果实现更加精确的控制.只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和 ...

  6. 10款基于HTML5+CSS3实现的超酷源码动画

    1.基于Bootstrap的jQuery登录表单 这是一款基于Bootstrap的登录表单,表单的外观自然不用说,沿用了Bootstrap的风格,非常漂亮.这款登录表单有一个经过CSS3处理过的头像图 ...

  7. 8款超酷的HTML5 3D图片动画源码

    1.HTML5移动端图片左右切换动画 今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外观上,这款 ...

  8. 7款超酷HTML5 3D动画精选应用及源码

    对以前来讲,3D动画拿到网页上展示是一件非常奢侈的事情,第一是浏览器不够先进,第二是大部分只能用flash实现伪3D.HTML5的出现,让实现网页3D动画变得非常简单,当然前提是你不要再使用像IE67 ...

  9. 超酷震撼 HTML5/CSS3动画应用及源码

    HTML5可以制作非常华丽的动画效果,这点通过之前的分享学习我们已经有深刻的了解了,今天我们主要来分享一些HTML5结合CSS3形成的超炫震撼的动画应用以及它们的源代码,真的非常不错. 1.纯CSS3 ...

随机推荐

  1. Python3正则表达式(2)

    re库常用方法 正则表达式的表示类型: 1.re库采用 raw string 类型(原生字符串类型),不用对转义符再次转义,表示为:r'text' 例如:r'\d{3}-\d{8}' 2.re库采用 ...

  2. 处理全站请求编码,无论是GET还是POST,默认是UTF-8

    1.java类: import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChain;imp ...

  3. Node 从安装到跑项目

    1,下载 node 链接地址:http://nodejs.cn/ 假设安装到 C:\Program Files\nodejs 2, 设置npm安装程序时的默认位置 npm config set pre ...

  4. GPSCamera隐私声明

    GPSCamera获取了以下敏感隐私权限用于照片水印展示: 1:修改或删除您的SD卡中的内容 2:访问确切位置信息(使用 GPS 和网络进行定位) 3:访问大致位置信息(使用网络进行定位) 4:拍摄照 ...

  5. Js 判断浏览器类型整理

    判断原理 JavaScript是前端开发的主要语言,我们可以通过 编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性 ...

  6. [C#]手把手教你打造Socket的TCP通讯连接(一)

    本文章将讲解基于TCP连接的Socket通讯,使用Socket异步功能,并且无粘包现象,通过事件驱动使用. 在编写Socket代码之前,我们得要定义一下Socket的基本功能. 作为一个TCP连接,不 ...

  7. Python中Queue模块及多线程使用

    Python的Queue模块提供一种适用于多线程编程的FIFO实现.它可用于在生产者(producer)和消费者(consumer)之间线程安全(thread-safe)地传递消息或其它数据,因此多个 ...

  8. Android Studio下加入百度地图的使用(二)——定位服务

    上一章(http://www.cnblogs.com/jerehedu/p/4891216.html)中我们已经完成了环境的搭建,这一章我们来研究一下如何使用. 第一步:在xml文件中加入以下权限 & ...

  9. 微软BI 之SSIS 系列 - 在 SSIS 中将指定目录下的所有文件分类输出到不同文件夹

    开篇介绍 比如有这样的一个需求,旧的一个业务系统通常将产出的文件输出到同一个指定的目录下的不同子目录,输出的文件类型有 XML,EXCEL, TXT 这些不同后缀的文件.现在需要在 SSIS 中将它们 ...

  10. 2014年新一代的报表利器 Qlik Sense Desktop 初步体验

    点击进入 QlikView/QlikSense 社区  交流群:432998033 Qlik Sense Desktop 的案例展示 先上几个刚刚边看边学完成的几个报表案例效果 (如果图片显示不正常, ...