Lihat DemoDownload
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<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>
<!-- Lables for the controls -->
<div id="timer_controls">
<label for="start">Start</label>
<label for="stop">Stop</label>
<label for="reset">Reset</label>
</div>.timer{padding:10px;overflow:hidden;display:inline-block;border:7px solid #efefef;border-radius:5px;position:relative;background:linear-gradient(top,#222,#444);background:-webkit-linear-gradient(top,#222,#444);background:-moz-linear-gradient(top,#222,#444);background:-o-linear-gradient(top,#222,#444);box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-webkit-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-moz-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1);-o-box-shadow:inset 0 -2px 10px 1px rgba(0,0,0,0.75),0 5px 20px -10px rgba(0,0,0,1)}
.cell{/*Should only display 1 digit. Hence height = line height of .numbers and width = width of .numbers*/
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;/*Glow to the text*/
text-shadow:0 0 5px rgba(255,255,255,1)}
/*Styles for the controls*/
#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{animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused}
#start:checked~.timer .numbers{animation-play-state:running;-webkit-animation-play-state:running;-moz-animation-play-state:running;-o-animation-play-state:running}
#reset:checked~.timer .numbers{animation:none;-webkit-animation:none;-moz-animation:none;-o-animation:none}
.moveten{/*The digits move but dont look good. We will use steps now 10 digits = 10 steps. You can now see the digits swapping instead of moving pixel-by-pixel*/
animation:moveten 1s steps(10,end) infinite;-webkit-animation:moveten 1s steps(10,end) infinite;-moz-animation:moveten 1s steps(10,end) infinite;-o-animation:moveten 1s steps(10,end) infinite;/*By default animation should be paused*/
animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused}
.movesix{animation:movesix 1s steps(6,end) infinite;-webkit-animation:movesix 1s steps(6,end) infinite;-moz-animation:movesix 1s steps(6,end) infinite;-o-animation:movesix 1s steps(6,end) infinite;animation-play-state:paused;-webkit-animation-play-state:paused;-moz-animation-play-state:paused;-o-animation-play-state:paused}
/*Now we need to sync the animation speed with time speed*/
/*One second per digit. 10 digits. Hence 10s*/
.second{animation-duration:10s;-webkit-animation-duration:10s;-moz-animation-duration:10s;-o-animation-duration:10s}
.tensecond{animation-duration:60s;-webkit-animation-duration:60s;-moz-animation-duration:60s;-o-animation-duration:60s}
/*60 times .second*/
.milisecond{animation-duration:1s;-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s}
/*1/10th of .second*/
.tenmilisecond{animation-duration:0.1s;-webkit-animation-duration:0.1s;-moz-animation-duration:0.1s;-o-animation-duration:0.1s}
.hundredmilisecond{animation-duration:0.01s;-webkit-animation-duration:0.01s;-moz-animation-duration:0.01s;-o-animation-duration:0.01s}
.minute{animation-duration:600s;-webkit-animation-duration:600s;-moz-animation-duration:600s;-o-animation-duration:600s}
/*60 times .second*/
.tenminute{animation-duration:3600s;-webkit-animation-duration:3600s;-moz-animation-duration:3600s;-o-animation-duration:3600s}
/*60 times .minute*/
.hour{animation-duration:36000s;-webkit-animation-duration:36000s;-moz-animation-duration:36000s;-o-animation-duration:36000s}
/*60 times .minute*/
.tenhour{animation-duration:360000s;-webkit-animation-duration:360000s;-moz-animation-duration:360000s;-o-animation-duration:360000s}
/*10 times .hour*/
/*The stopwatch looks good now. Lets add some styles*/
/*Lets animate the digit now - the main part of this tutorial*/
/*We are using prefixfree,so no need of vendor prefixes*/
/*The logic of the animation is to alter the 'top' value of the absolutely
positioned .numbers*/
/*Minutes and Seconds should be limited to only '60' and not '100'
Hence we need to create 2 animations. One with 10 steps and 10 digits and
the other one with 6 steps and 6 digits*/
@keyframes moveten{0%{top:0}
100%{top:-400px}
/*height = 40. digits = 10. hence -400 to move it completely to the top*/}
@-webkit-keyframes moveten{0%{top:0}
100%{top:-400px;}}
@-moz-keyframes moveten{0%{top:0}
100%{top:-400px;}}
@-o-keyframes moveten{0%{top:0}
100%{top:-400px;}}
@keyframes movesix{0%{top:0}
100%{top:-240px}
/*height = 40. digits = 6. hence -240 to move it completely to the top*/}
@-webkit-keyframes movesix{0%{top:0}
100%{top:-240px;}}
@-moz-keyframes movesix{0%{top:0}
100%{top:-240px;}}
@-o-keyframes movesix{0%{top:0}
100%{top:-240px}
}
0 comments:
Post a Comment
Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.
terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.