純CSS3制作秒表

2024-09-05 12:17:13

字體：大中小

來源：轉載

供稿：網友

純CSS3制作秒表，實現要領：
　　1、動畫的邏輯就是給數字使用了絕對定位，改變“top”的屬性值；
　　2、分和秒應該是 '60' 而不是 '100'，因此需要創建兩個動畫；
　　3、十步十個數字
　　4、六步六個數字

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>純CSS3制作秒表</title><style type="text/css">body{	background: url('/jscss/demoimg/201211/wood_pattern.png') repeat;}.container {	padding: 50px;	text-align: center;}.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);}.cell {	/*只顯示一位數字. 高度 = 數字的行高，寬度 = 數字的寬度*/	width: 0.60em;	height: 40px;	font-size: 50px;	overflow: hidden;	position: relative;	float: left;}.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);}/*秒表控制器樣式*/#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;}/*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;}.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;}/*同步時間的速率*//*每秒十個數字，因此也需要十步*/.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;} .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;}.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;} .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*/}@-webkit-keyframes movesix {	0% {top: 0;}	100% {top: -240px;} 	/*height = 40. digits = 6. hence -240 to move it completely to the top*/}@-moz-keyframes moveten {	0% {top: 0;}	100% {top: -400px;} 	/*height = 40. digits = 10. hence -400 to move it completely to the top*/}@-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*/}@-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*/}@-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*/}@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');	}		</style></head><body><div   id="70qarhlowxag"   class="page">	<section class="demo">		<div   id="70qarhlowxag"   class="container">						<input id="start" name="controls" type="radio" />			<input id="stop" name="controls" type="radio" />			<input id="reset" name="controls" type="radio" />			<div   id="70qarhlowxag"   class="timer">				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>				</div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>				</div>				<div   id="70qarhlowxag"   class="cell divider"><div   id="70qarhlowxag"   class="numbers">:</div></div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers tenminute movesix">0 1 2 3 4 5 6</div>				</div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>				</div>				<div   id="70qarhlowxag"   class="cell divider"><div   id="70qarhlowxag"   class="numbers">:</div></div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers tensecond movesix">0 1 2 3 4 5 6</div>				</div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>				</div>				<div   id="70qarhlowxag"   class="cell divider"><div   id="70qarhlowxag"   class="numbers">:</div></div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>				</div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>				</div>				<div   id="70qarhlowxag"   class="cell">					<div   id="70qarhlowxag"   class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>				</div>			</div>						<div   class="70qarhlowxag"   id="timer_controls">				<label for="start">Start</label>				<label for="stop">Stop</label>				<label for="reset">Reset</label>			</div>		</div>		<p style="text-align:center">此案例代碼來自于thecodeplayer.com，并做過相應的代碼處理。</p></section></div></body></html>

上一篇：CSS3文字動畫，文字滾動，文字漸變特效

下一篇：iPhone Checkbox Effect