KrishnaVandanu

pure-ccs3-digit-clock

<div dir="ltr" style="text-align: left;" trbidi="on"> <style> /* *************************************** */ /* font by http://www.dafont.com/digital-7.font */ @font-face { font-family: 'digital-7'; src: url('http://denisx.ru/fonts/digital-webfont.ttf') format('truetype'); font-weight: normal; font-style: normal; } .myClockJS .digit { margin: 0 auto; position: relative; width: 100px; font: 24px/1 'digital-7'; left: -60px; } .myClockJS b { font-weight: normal; } .myClockJS .digit .arr>b>b:nth-child(1)>b:after{content:'0';} .myClockJS .digit .arr>b>b:nth-child(2)>b:after{content:'1';} .myClockJS .digit .arr>b>b:nth-child(3)>b:after{content:'2';} .myClockJS .digit .arr>b>b:nth-child(4)>b:after{content:'3';} .myClockJS .digit .arr>b>b:nth-child(5)>b:after{content:'4';} .myClockJS .digit .arr>b>b:nth-child(6)>b:after{content:'5';} .myClockJS .digit .arr>b>b:nth-child(7)>b:after{content:'6';} .myClockJS .digit .arr>b>b:nth-child(8)>b:after{content:'7';} .myClockJS .digit .arr>b>b:nth-child(9)>b:after{content:'8';} .myClockJS .digit .arr>b>b:nth-child(10)>b:after{content:'9';} .myClockJS .digit .arr>b:nth-child(3)>b:nth-child(1)>b:after , .myClockJS .digit .arr>b:nth-child(6)>b:nth-child(1)>b:after { content:':'; } .myClockJS .digit .arr>b , .myClockJS .digit .arr>b>b { position: absolute; width: auto; } .myClockJS .digit .arr>b:nth-child(1) { left: 0; } .myClockJS .digit .arr>b:nth-child(2) { left: 30px; } .myClockJS .digit .arr>b:nth-child(3) { left: 50px; } .myClockJS .digit .arr>b:nth-child(4) { left: 70px; } .myClockJS .digit .arr>b:nth-child(5) { left: 100px; } .myClockJS .digit .arr>b:nth-child(6) { left: 120px; } .myClockJS .digit .arr>b:nth-child(7) { left: 140px; } .myClockJS .digit .arr>b:nth-child(8) { left: 170px; } .myClockJS .digit .arr:after { content: ''; display: block; clear: both; } .myClockJS .digit .arr>b>b { opacity: 0; } /* webkit */ .myClockJS .digit .arr>b>b { -webkit-animation-iteration-count: infinite; } .myClockJS .digit .arr>b:nth-child(1)>b{-webkit-animation-duration: 86400s;} /* 86400 */ .myClockJS .digit .arr>b:nth-child(2)>b{-webkit-animation-duration: 86400s;} /* 86400 */ .myClockJS .digit .arr>b:nth-child(4)>b{-webkit-animation-duration: 3600s;} /* 3600 */ .myClockJS .digit .arr>b:nth-child(5)>b{-webkit-animation-duration: 600s;} /* 600 */ .myClockJS .digit .arr>b:nth-child(7)>b{-webkit-animation-duration: 60s;} /* 60 */ .myClockJS .digit .arr>b:nth-child(8)>b{-webkit-animation-duration: 10s;} /* 10 */ .myClockJS .digit .arr>b:nth-child(3)>b , .myClockJS .digit .arr>b:nth-child(6)>b { -webkit-animation-duration: 1s; -webkit-animation-name: digit_second; -webkit-animation-delay: 0.01s; } @-webkit-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 } 51% {opacity: 0 }} /* moz */ .myClockJS .digit .arr>b>b { -moz-animation-iteration-count: infinite; } .myClockJS .digit .arr>b:nth-child(1)>b{-moz-animation-duration: 86400s;} /* 86400 */ .myClockJS .digit .arr>b:nth-child(2)>b{-moz-animation-duration: 86400s;} /* 86400 */ .myClockJS .digit .arr>b:nth-child(4)>b{-moz-animation-duration: 3600s;} /* 3600 */ .myClockJS .digit .arr>b:nth-child(5)>b{-moz-animation-duration: 600s;} /* 600 */ .myClockJS .digit .arr>b:nth-child(7)>b{-moz-animation-duration: 60s;} /* 60 */ .myClockJS .digit .arr>b:nth-child(8)>b{-moz-animation-duration: 10s;} /* 10 */ .myClockJS .digit .arr>b:nth-child(3)>b , .myClockJS .digit .arr>b:nth-child(6)>b { -moz-animation-duration: 1s; -moz-animation-name: digit_second; -moz-animation-delay: 0.01s; } @-moz-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 } 51% {opacity: 0 }} .css-link { position: relative; top: 4em; text-align: center; } .denisx-link { position: relative; top: 5em; text-align: right; margin-right: 1em; color: #aaa; font-size: 0.8em; } .with-love { position: absolute; margin-top: 1.5em; } .jq-link { position: absolute; font-size: 0.85em; margin-top: 4em; } </style>   <link href="http://denisx.ru/myclockcss/keyframes_digit.php?h=4" rel="stylesheet" type="text/css"></link> <div class="myClockJS"> <div class="digit"> </div> </div> <div class="css-link"> <a href="http://helpsblogging.blogspot.com/" target="_blank">HelpsBlogging</a> →</div> <div class="denisx-link"> from Russia with love<a href="http://util.factum.pro/jquery/" target="_blank">jQuery Docs with Version Switcher</a>Carefully made by <a href="http://www.denisx.ru/" target="_blank">Denis Khripkov</a></div> <div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"> <img alt="" class="zemanta-pixie-img" src="http://img.zemanta.com/pixy.gif?x-id=65c741d5-378a-4401-a4b5-c7f80bd592df" style="border: none; float: right;" /></div> </div>

pure-ccs3-digit-clock

...