Chinaunix首页 | 论坛 | 博客

chunzhisu的ChinaUnix博客

首页　| 　博文目录　| 　关于我

chunzhisu

  • 博客访问： 79172
  • 博文数量： 73
  • 博客积分： 0
  • 博客等级： 民兵
  • 技术积分： 740
  • 用 户 组： 普通用户
  • 注册时间： 2014-07-04 16:50
文章分类

全部博文（73）

文章存档

2014年（73）

我的朋友
最近访客
推荐博文
纯CSS3制作秒表

分类： Html/Css

2014-07-10 16:49:03

  • 纯CSS3制作秒表，实现要领： 
    　　1、动画的逻辑就是给数字使用了绝对定位，改变“top”的属性值； 
    　　2、分 和 秒 应该是 '60' 而不是 '100'，因此需要创建两个动画； 
    　　3、十步十个数字 
    　　4、六步六个数字

点击(此处)折叠或打开

  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>纯CSS3制作秒表</title>
  6. <style type="text/css">
  7. body{
  8.     background: url('/jscss/demoimg/201211/wood_pattern.png') repeat;
  9. }
  10. .container {
  11.     padding: 50px;
  12.     text-align: center;
  13. }

  15. .timer {
  16.     padding: 10px;
  17.     background: -webkit-linear-gradient(top, #222, #444);
  18.     background: -moz-linear-gradient(top, #222, #444);
  19.     background: -ms-linear-gradient(top, #222, #444);
  20.     background: -o-linear-gradient(top, #222, #444);
  21.     background: linear-gradient(top, #222, #444);
  22.     overflow: hidden;
  23.     display: inline-block;
  24.     border: 7px solid #efefef;
  25.     border-radius: 5px;
  26.     position: relative;    
  27.     box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
  28. }

  30. .cell {
  31.     /*只显示一位数字. 高度 = 数字的行高，宽度 = 数字的宽度*/
  32.     width: 0.60em;
  33.     height: 40px;
  34.     font-size: 50px;
  35.     overflow: hidden;
  36.     position: relative;
  37.     float: left;
  38. }

  40. .numbers {
  41.     width: 0.6em;
  42.     line-height: 40px;
  43.     font-family: digital, arial, verdana;
  44.     text-align: center;
  45.     color: #fff;
  46.     position: absolute;
  47.     top: 0;
  48.     left: 0;
  49.     /*数字发光效果*/
  50.     text-shadow: 0 0 5px rgba(255, 255, 255, 1);
  51. }

  53. /*秒表控制器样式*/
  54. #timer_controls {
  55.     margin-top: -5px;
  56. }
  57. #timer_controls label {
  58.     cursor: pointer;
  59.     padding: 5px 10px;
  60.     background: #efefef;
  61.     font-family: arial, verdana, tahoma;
  62.     font-size: 11px;
  63.     border-radius: 0 0 3px 3px;
  64. }
  65. input[name="controls"] {display: none;}

  67. /*Control code*/
  68. /*秒表暂停运转*/
  69. #stop:checked~.timer .numbers {
  70.     -webkit-animation-play-state: paused;
  71.     -moz-animation-play-state: paused;
  72.     -o-animation-play-state: paused;
  73.     -ms-animation-play-state: paused;
  74.     animation-play-state: paused;
  75. }
  76. /*秒表开始运转*/
  77. #start:checked~.timer .numbers {
  78.   -webkit-animation-play-state: running;
  79.   -moz-animation-play-state: running;
  80.   -o-animation-play-state: running;
  81.   -ms-animation-play-state: running;
  82.   animation-play-state: running;
  83. }
  84. /*重置秒表*/
  85. #reset:checked~.timer .numbers {
  86.   -webkit-animation: none;
  87.   -moz-animation: none;
  88.   -o-animation: none;
  89.   -ms-animation: none;
  90.   animation: none;
  91. }

  93. .moveten {
  94.     /*使用分步骤来移动数字，10个数字等于10步*/
  95.     -webkit-animation: moveten 1s steps(10, end) infinite;
  96.     -moz-animation: moveten 1s steps(10, end) infinite;
  97.     -o-animation: moveten 1s steps(10, end) infinite;
  98.     -ms-animation: moveten 1s steps(10, end) infinite;
  99.     animation: moveten 1s steps(10, end) infinite;
  100.     /*默认情况下动画是停止不动的*/
  101.     -webkit-animation-play-state: paused;
  102.     -moz-animation-play-state: paused;
  103.     -o-animation-play-state: paused;
  104.     -ms-animation-play-state: paused;
  105.     animation-play-state: paused;
  106. }
  107. .movesix {
  108.     -webkit-animation: movesix 1s steps(6, end) infinite;
  109.     -moz-animation: movesix 1s steps(6, end) infinite;
  110.     -o-animation: movesix 1s steps(6, end) infinite;
  111.     -ms-animation: movesix 1s steps(6, end) infinite;
  112.     animation: movesix 1s steps(6, end) infinite;
  113. }

  115. /*同步时间的速率*/
  116. /*每秒十个数字，因此也需要十步*/
  117. .second {
  118.  -webkit-animation-duration: 10s;
  119.  -moz-animation-duration: 10s;
  120.  -o-animation-duration: 10s;
  121.  -ms-animation-duration: 10s;
  122.  animation-duration: 10s;
  123. }
  124. .tensecond {
  125.   /*60 times .second*/
  126.   -webkit-animation-duration: 60s;
  127.   -moz-animation-duration: 60s;
  128.   -o-animation-duration: 60s;
  129.   -ms-animation-duration: 60s;
  130.   animation-duration: 60s;
  131. }

  133. .milisecond {
  134.   /*1/10th of .second*/
  135.   -webkit-animation-duration: 1s;
  136.     -moz-animation-duration: 1s;
  137.     -o-animation-duration: 1s;
  138.     -ms-animation-duration: 1s;
  139.     animation-duration: 1s;
  140. }
  141. .tenmilisecond {
  142.   -webkit-animation-duration: 0.1s;
  143.   -moz-animation-duration: 0.1s;
  144.   -ms-animation-duration: 0.1s;
  145.   -o-animation-duration: 0.1s;
  146.   animation-duration: 0.1s;
  147. }
  148. .hundredmilisecond {
  149.   -webkit-animation-duration: 0.01s;
  150.   -moz-animation-duration: 0.01s;
  151.   -o-animation-duration: 0.01s;
  152.   -ms-animation-duration: 0.01s;
  153.   animation-duration: 0.01s;
  154. }

  156. .minute {
  157.   /*60 times .second*/
  158.   -webkit-animation-duration: 600s;
  159.     -moz-animation-duration: 600s;
  160.     -o-animation-duration: 600s;
  161.     -ms-animation-duration: 600s;
  162.     animation-duration: 600s;
  163. }
  164. .tenminute {
  165.   /*60 times .minute*/
  166.   -webkit-animation-duration: 3600s;
  167.     -moz-animation-duration: 3600s;
  168.     -ms-animation-duration: 3600s;
  169.     -o-animation-duration: 3600s;
  170.     animation-duration: 3600s;
  171. }

  173. .hour {
  174.   /*60 times .minute*/
  175.   -webkit-animation-duration: 36000s;
  176.     -moz-animation-duration: 36000s;
  177.     -ms-animation-duration: 36000s;
  178.     -o-animation-duration: 36000s;
  179.     animation-duration: 36000s;
  180. }
  181. .tenhour {
  182.   /*10 times .hour*/
  183.   -webkit-animation-duration: 360000s;
  184.     -moz-animation-duration: 360000s;
  185.     -o-animation-duration: 360000s;
  186.     -ms-animation-duration: 360000s;
  187.     animation-duration: 360000s;
  188. }
  189. @-webkit-keyframes moveten {
  190.     0% {top: 0;}
  191.     100% {top: -400px;}
  192.     /*height = 40. digits = 10. hence -400 to move it completely to the top*/
  193. }

  195. @-webkit-keyframes movesix {
  196.     0% {top: 0;}
  197.     100% {top: -240px;}
  198.     /*height = 40. digits = 6. hence -240 to move it completely to the top*/
  199. }

  201. @-moz-keyframes moveten {
  202.     0% {top: 0;}
  203.     100% {top: -400px;}
  204.     /*height = 40. digits = 10. hence -400 to move it completely to the top*/
  205. }

  207. @-moz-keyframes movesix {
  208.     0% {top: 0;}
  209.     100% {top: -240px;}
  210.     /*height = 40. digits = 6. hence -240 to move it completely to the top*/
  211. }
  212. @-o-keyframes moveten {
  213.     0% {top: 0;}
  214.     100% {top: -400px;}
  215.     /*height = 40. digits = 10. hence -400 to move it completely to the top*/
  216. }

  218. @-o-keyframes movesix {
  219.     0% {top: 0;}
  220.     100% {top: -240px;}
  221.     /*height = 40. digits = 6. hence -240 to move it completely to the top*/
  222. }
  223. @-ms-keyframes moveten {
  224.     0% {top: 0;}
  225.     100% {top: -400px;}
  226.     /*height = 40. digits = 10. hence -400 to move it completely to the top*/
  227. }

  229. @-ms-keyframes movesix {
  230.     0% {top: 0;}
  231.     100% {top: -240px;}
  232.     /*height = 40. digits = 6. hence -240 to move it completely to the top*/
  233. }
  234. @keyframes moveten {
  235.     0% {top: 0;}
  236.     100% {top: -400px;}
  237.     /*height = 40. digits = 10. hence -400 to move it completely to the top*/
  238. }

  240. @keyframes movesix {
  241.     0% {top: 0;}
  242.     100% {top: -240px;}
  243.     /*height = 40. digits = 6. hence -240 to move it completely to the top*/
  244. }
  245. /*Lets use a better font for the numbers*/
  246. @font-face {
  247.     font-family: 'digital';
  248.     src: url('');
  249.     
  250. }    
  251.     </style>
  252. </head>
  253. <body>
  254. <div class="page">
  255.     <section class="demo">
  256.         <div class="container">
  257.             
  258.             <input id="start" name="controls" type="radio" />
  259.             <input id="stop" name="controls" type="radio" />
  260.             <input id="reset" name="controls" type="radio" />
  261.             <div class="timer">
  262.                 <div class="cell">
  263.                     <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
  264.                 </div>
  265.                 <div class="cell">
  266.                     <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
  267.                 </div>
  268.                 <div class="cell divider"><div class="numbers">:</div></div>
  269.                 <div class="cell">
  270.                     <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
  271.                 </div>
  272.                 <div class="cell">
  273.                     <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
  274.                 </div>
  275.                 <div class="cell divider"><div class="numbers">:</div></div>
  276.                 <div class="cell">
  277.                     <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
  278.                 </div>
  279.                 <div class="cell">
  280.                     <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
  281.                 </div>
  282.                 <div class="cell divider"><div class="numbers">:</div></div>
  283.                 <div class="cell">
  284.                     <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  285.                 </div>
  286.                 <div class="cell">
  287.                     <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  288.                 </div>
  289.                 <div class="cell">
  290.                     <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
  291.                 </div>
  292.             </div>
  293.             
  294.             <div id="timer_controls">
  295.                 <label for="start">Start</label>
  296.                 <label for="stop">Stop</label>
  297.                 <label for="reset">Reset</label>
  298.             </div>
  299.         </div>
  300.         <p style="text-align:center">此案例代码来自于<a href="http://thecodeplayer.com/walkthrough/make-a-stopwatch-using-css3-without-images-or-javascript" target="_blank">thecodeplayer.com</a>，并做过相应的代码处理。</p>
  301. </section>
  302. </div>
  303. </body>
  304. </html>


阅读(341) | 评论(0) | 转发(0) |
0

上一篇：CSS控制表格打印

下一篇：纯CSS实现三角形

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6