非常漂亮的网页秒表计时器

作者：秋了秋发表时间：2014年09月16日

一款很酷很有型的秒表计时器，以后运动会就带着个这个东西去了，开玩笑的，某些网站还是非常需要这样的秒表计时器，比如说在线答题的，时时彩等等。

演示：

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>一款纯CSS3制作的秒表</title></p> <style type="text/css"> body{ background:white; } .container { padding: 50px; text-align: center; }</p> <p>.timer { padding: 10px; background: -webkit-linear-gradient(top, #222, #444); background: -moz-linear-gradient(top, #222, #444); background: -ms-linear-gradient(top, #222, #444); background: -o-linear-gradient(top, #222, #444); background: linear-gradient(top, #222, #444); overflow: hidden; display: inline-block; border: 7px solid #efefef; border-radius: 5px; position: relative; box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1); }</p> <p>.cell { /*只显示一位数字. 高度 = 数字的行高，宽度 = 数字的宽度*/ width: 0.60em; height: 40px; font-size: 50px; overflow: hidden; position: relative; float: left; }</p> <p>.numbers { width: 0.6em; line-height: 40px; font-family: digital, arial, verdana; text-align: center; color: #fff; position: absolute; top: 0; left: 0; /*数字发光效果*/ text-shadow: 0 0 5px rgba(255, 255, 255, 1); }</p> <p>/*秒表控制器样式*/ #timer_controls { margin-top: -5px; } #timer_controls label { cursor: pointer; padding: 5px 10px; background: #efefef; font-family: arial, verdana, tahoma; font-size: 11px; border-radius: 0 0 3px 3px; } input[name="controls"] {display: none;}</p> <p>/*Control code*/ /*秒表暂停运转*/ #stop:checked~.timer .numbers { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; } /*秒表开始运转*/ #start:checked~.timer .numbers { -webkit-animation-play-state: running; -moz-animation-play-state: running; -o-animation-play-state: running; -ms-animation-play-state: running; animation-play-state: running; } /*重置秒表*/ #reset:checked~.timer .numbers { -webkit-animation: none; -moz-animation: none; -o-animation: none; -ms-animation: none; animation: none; }</p> <p>.moveten { /*使用分步骤来移动数字，10个数字即是10步*/ -webkit-animation: moveten 1s steps(10, end) infinite; -moz-animation: moveten 1s steps(10, end) infinite; -o-animation: moveten 1s steps(10, end) infinite; -ms-animation: moveten 1s steps(10, end) infinite; animation: moveten 1s steps(10, end) infinite; /*默认情况下动画停止不动的*/ -webkit-animation-play-state: paused; -moz-animation-play-state: paused; -o-animation-play-state: paused; -ms-animation-play-state: paused; animation-play-state: paused; } .movesix { -webkit-animation: movesix 1s steps(6, end) infinite; -moz-animation: movesix 1s steps(6, end) infinite; -o-animation: movesix 1s steps(6, end) infinite; -ms-animation: movesix 1s steps(6, end) infinite; animation: movesix 1s steps(6, end) infinite; }</p> <p>/*同步时间的速率*/ /*每秒十个数字，因此也需要十步*/ .second { -webkit-animation-duration: 10s; -moz-animation-duration: 10s; -o-animation-duration: 10s; -ms-animation-duration: 10s; animation-duration: 10s; } .tensecond { /*60 times .second*/ -webkit-animation-duration: 60s; -moz-animation-duration: 60s; -o-animation-duration: 60s; -ms-animation-duration: 60s; animation-duration: 60s; }</p> <p>.milisecond { /*1/10th of .second*/ -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; -ms-animation-duration: 1s; animation-duration: 1s; } .tenmilisecond { -webkit-animation-duration: 0.1s; -moz-animation-duration: 0.1s; -ms-animation-duration: 0.1s; -o-animation-duration: 0.1s; animation-duration: 0.1s; } .hundredmilisecond { -webkit-animation-duration: 0.01s; -moz-animation-duration: 0.01s; -o-animation-duration: 0.01s; -ms-animation-duration: 0.01s; animation-duration: 0.01s; }</p> <p>.minute { /*60 times .second*/ -webkit-animation-duration: 600s; -moz-animation-duration: 600s; -o-animation-duration: 600s; -ms-animation-duration: 600s; animation-duration: 600s; } .tenminute { /*60 times .minute*/ -webkit-animation-duration: 3600s; -moz-animation-duration: 3600s; -ms-animation-duration: 3600s; -o-animation-duration: 3600s; animation-duration: 3600s; }</p> <p>.hour { /*60 times .minute*/ -webkit-animation-duration: 36000s; -moz-animation-duration: 36000s; -ms-animation-duration: 36000s; -o-animation-duration: 36000s; animation-duration: 36000s; } .tenhour { /*10 times .hour*/ -webkit-animation-duration: 360000s; -moz-animation-duration: 360000s; -o-animation-duration: 360000s; -ms-animation-duration: 360000s; animation-duration: 360000s; } @-webkit-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ }</p> <p>@-webkit-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ }</p> <p>@-moz-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ }</p> <p>@-moz-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } @-o-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ }</p> <p>@-o-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } @-ms-keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ }</p> <p>@-ms-keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } @keyframes moveten { 0% {top: 0;} 100% {top: -400px;} /*height = 40. digits = 10. hence -400 to move it completely to the top*/ }</p> <p>@keyframes movesix { 0% {top: 0;} 100% {top: -240px;} /*height = 40. digits = 6. hence -240 to move it completely to the top*/ } /*Lets use a better font for the numbers*/ @font-face { font-family: 'digital'; src: url('http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF');</p> <p>} </style> <p><meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head> <body></p> <div class="page"> <section class="demo"> <div class="container">  <input id="start" name="controls" type="radio" /> <input id="stop" name="controls" type="radio" /> <input id="reset" name="controls" type="radio" /></p> <div class="timer"> <div class="cell"> <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">:</div> </div> <div class="cell"> <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">:</div> </div> <div class="cell"> <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div> </div> <div class="cell"> <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell divider"> <div class="numbers">:</div> </div> <div class="cell"> <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> <div class="cell"> <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div> </div> </div> <p></p> <div id="timer_controls"> <label for="start">开始</label> <label for="stop">暂停</label> <label for="reset">清零</label> </div> </div> </div> <p></body> </html></p> <p>

提示：可以先修改部分代码再运行

再配上网页时间显示，简直就perfect！

<!DOCTYPE html> <html lang="en-US"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta charset="UTF-8"> <title>一款CSS3制作个性网页时钟</title></p> <style type="text/css"> body,ul,li{ padding: 0; margin:0; } a { color: rgb(1, 124, 185); text-decoration: none; } body{ font-size:16px; color: #5a5d63; background: #d6d7d9; background: -webkit-radial-gradient(#eeefef, #d6d7d9); background: -moz-radial-gradient(#eeefef, #d6d7d9); background: -o-radial-gradient(#eeefef, #d6d7d9); background: -ms-radial-gradient(#eeefef, #d6d7d9); background: radial-gradient(#eeefef, #d6d7d9); padding: 50px; } .box{ width: 540px; height: 200px; margin: 50px auto; } .box li{ position: relative; text-align: center; list-style-type: none; display: inline-block; width: 150px; height:160px; text-shadow:0 2px 1px #f4f4f4; border:1px solid #9fa2ad; border-radius: 5px; margin-right:10px; background: -webkit-gradient(linear,0 0, 0 100%, color-stop(.2,rgba(248,248,248,.3)), color-stop(.5,rgba(168,173,190,.5)), color-stop(.51,rgba(168,173,190,.3)), color-stop(.9,rgba(248,248,248,.2))); background: -webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%); background: -moz-linear-gradient(top, rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%); background: -o-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%); background: -ms-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%); background: linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%); box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad; } .box li:before, .box li:after{ display: block; content: ""; position: absolute; width: 150px; } .box li:before{ top:50%; height: 1px; box-shadow: 0 1px 0 #868995,0 2px 1px #fff; } .box li:after{ bottom: -65px; height: 60px; border-radius:0 0 5px 5px; background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0))); background: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0)); background: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0)); background: -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0)); background: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0)); background: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0)); z-index: 1 } .box li span:first-child{ font:120px 'BitstreamVeraSansMonoBold'; color: #52555a; display: block; height: 130px; line-height: 150px; } @font-face { font-family: 'BitstreamVeraSansMonoBold'; src: url('VeraMono-Bold-webfont.eot'); src: url('VeraMono-Bold-webfont.eot?#iefix') format('embedded-opentype'), url('VeraMono-Bold-webfont.woff') format('woff'), url('VeraMono-Bold-webfont.ttf') format('truetype'), url('VeraMono-Bold-webfont.svg#BitstreamVeraSansMonoBold') format('svg'); font-weight: normal; font-style: normal; } </style> <p></head> <body></p> <div class="box"> <ul> <li><span id="hour"></span><span>小时</span></li> <li><span id="minute"></span><span>分钟</span></li> <li><span id="second"></span><span>秒钟</span></li> </ul> </div> <p><script>(function(){ var hour=document.getElementById('hour'); var minute=document.getElementById('minute'); var second=document.getElementById('second'); function showTime(){ var oDate=new Date(); var iHours=oDate.getHours(); var iMinute=oDate.getMinutes(); var iSecond=oDate.getSeconds(); hour.innerHTML=AddZero(iHours); minute.innerHTML=AddZero(iMinute); second.innerHTML=AddZero(iSecond); } showTime(); setInterval(showTime,1000); function AddZero(n){ if(n<10){ return '0'+n; } return ''+n; } })();</script> </body> </html>

提示：可以先修改部分代码再运行

文章作者： “秋了秋”个人博客，本站鼓励原创。

转载请注明本文地址：http://netblog.cn/blog/115.html

目录: 网页特效标签: 网页计时器,秒表 18861次阅读

非常漂亮的网页秒表计时器

作者：秋了秋 发表时间：2014年09月16日

作者：秋了秋发表时间：2014年09月16日