pure-ccs3-digit-clock

<div dir="ltr" style="text-align: left;" trbidi="on"><br /><style><br />/* *************************************** */<br />/* font by http://www.dafont.com/digital-7.font */<br /><br />@font-face {<br /> font-family: 'digital-7';<br /> src: url('http://denisx.ru/fonts/digital-webfont.ttf') format('truetype');<br /> font-weight: normal;<br /> font-style: normal;<br />}<br /><br />.myClockJS .digit {<br /> margin: 0 auto;<br /> position: relative;<br /> width: 100px;<br /> font: 24px/1 'digital-7';<br /> left: -60px;<br />}<br /><br />.myClockJS b {<br /> font-weight: normal;<br />}<br /><br /><br />.myClockJS .digit .arr>b>b:nth-child(1)>b:after{content:'0';}<br />.myClockJS .digit .arr>b>b:nth-child(2)>b:after{content:'1';}<br />.myClockJS .digit .arr>b>b:nth-child(3)>b:after{content:'2';}<br />.myClockJS .digit .arr>b>b:nth-child(4)>b:after{content:'3';}<br />.myClockJS .digit .arr>b>b:nth-child(5)>b:after{content:'4';}<br />.myClockJS .digit .arr>b>b:nth-child(6)>b:after{content:'5';}<br />.myClockJS .digit .arr>b>b:nth-child(7)>b:after{content:'6';}<br />.myClockJS .digit .arr>b>b:nth-child(8)>b:after{content:'7';}<br />.myClockJS .digit .arr>b>b:nth-child(9)>b:after{content:'8';}<br />.myClockJS .digit .arr>b>b:nth-child(10)>b:after{content:'9';}<br /><br />.myClockJS .digit .arr>b:nth-child(3)>b:nth-child(1)>b:after<br />, .myClockJS .digit .arr>b:nth-child(6)>b:nth-child(1)>b:after<br />{<br /> content:':';<br />}<br /><br />.myClockJS .digit .arr>b<br />, .myClockJS .digit .arr>b>b<br />{<br /> position: absolute;<br /> width: auto;<br />}<br /><br /><br />.myClockJS .digit .arr>b:nth-child(1) {<br /> left: 0;<br />}<br />.myClockJS .digit .arr>b:nth-child(2) {<br /> left: 30px;<br />}<br />.myClockJS .digit .arr>b:nth-child(3) {<br /> left: 50px;<br />}<br />.myClockJS .digit .arr>b:nth-child(4) {<br /> left: 70px;<br />}<br />.myClockJS .digit .arr>b:nth-child(5) {<br /> left: 100px;<br />}<br />.myClockJS .digit .arr>b:nth-child(6) {<br /> left: 120px;<br />}<br />.myClockJS .digit .arr>b:nth-child(7) {<br /> left: 140px;<br />}<br />.myClockJS .digit .arr>b:nth-child(8) {<br /> left: 170px;<br />}<br />.myClockJS .digit .arr:after {<br /> content: '';<br /> display: block;<br /> clear: both;<br />}<br /><br />.myClockJS .digit .arr>b>b {<br /> opacity: 0;<br />}<br /><br />/* webkit */<br />.myClockJS .digit .arr>b>b {<br /> -webkit-animation-iteration-count: infinite;<br />}<br /><br />.myClockJS .digit .arr>b:nth-child(1)>b{-webkit-animation-duration: 86400s;} /* 86400 */<br />.myClockJS .digit .arr>b:nth-child(2)>b{-webkit-animation-duration: 86400s;} /* 86400 */<br />.myClockJS .digit .arr>b:nth-child(4)>b{-webkit-animation-duration: 3600s;} /* 3600 */<br />.myClockJS .digit .arr>b:nth-child(5)>b{-webkit-animation-duration: 600s;} /* 600 */<br />.myClockJS .digit .arr>b:nth-child(7)>b{-webkit-animation-duration: 60s;} /* 60 */<br />.myClockJS .digit .arr>b:nth-child(8)>b{-webkit-animation-duration: 10s;} /* 10 */<br /><br />.myClockJS .digit .arr>b:nth-child(3)>b<br />, .myClockJS .digit .arr>b:nth-child(6)>b<br />{<br /> -webkit-animation-duration: 1s;<br /> -webkit-animation-name: digit_second;<br /> -webkit-animation-delay: 0.01s;<br />}<br />@-webkit-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 } 51% {opacity: 0 }}<br /><br />/* moz */<br /><br />.myClockJS .digit .arr>b>b {<br /> -moz-animation-iteration-count: infinite;<br />}<br /><br />.myClockJS .digit .arr>b:nth-child(1)>b{-moz-animation-duration: 86400s;} /* 86400 */<br />.myClockJS .digit .arr>b:nth-child(2)>b{-moz-animation-duration: 86400s;} /* 86400 */<br />.myClockJS .digit .arr>b:nth-child(4)>b{-moz-animation-duration: 3600s;} /* 3600 */<br />.myClockJS .digit .arr>b:nth-child(5)>b{-moz-animation-duration: 600s;} /* 600 */<br />.myClockJS .digit .arr>b:nth-child(7)>b{-moz-animation-duration: 60s;} /* 60 */<br />.myClockJS .digit .arr>b:nth-child(8)>b{-moz-animation-duration: 10s;} /* 10 */<br /><br />.myClockJS .digit .arr>b:nth-child(3)>b<br />, .myClockJS .digit .arr>b:nth-child(6)>b<br />{<br /> -moz-animation-duration: 1s;<br /> -moz-animation-name: digit_second;<br /> -moz-animation-delay: 0.01s;<br />}<br />@-moz-keyframes digit_second { 0% {opacity: 0 } 1% {opacity: 1 } 50% {opacity: 1 } 51% {opacity: 0 }}<br /><br />.css-link {<br /> position: relative;<br /> top: 4em;<br /> text-align: center;<br />}<br /> <br />.denisx-link {<br /> position: relative;<br /> top: 5em;<br /> text-align: right;<br /> margin-right: 1em;<br /> color: #aaa;<br /> font-size: 0.8em;<br />}<br />.with-love {<br /> position: absolute;<br /> margin-top: 1.5em;<br />}<br />.jq-link {<br /> position: absolute;<br /> font-size: 0.85em;<br /> margin-top: 4em;<br />}<br /></style><br /><!--<br /> Author: denisx | denisx@denisx.ru | http://www.denisx.ru/ | http://twitter.com/denisx/<br /> Date: 2012-02-02<br /> Prooflink: http://denisx.ru/myclockcss/<br /> Name: Pure CSS3 Digit Clock without Images & Javascript<br />--><br /><br /><!--<br /> Get UTC time form server<br /> ?h=4 for Moscow UTC+4 time<br />--><br /><link href="http://denisx.ru/myclockcss/keyframes_digit.php?h=4" rel="stylesheet" type="text/css"></link><br /><br /><br /><br /><div class="myClockJS"><br /><div class="digit"><br /><b class="arr"><br /> <b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> </b><br /> <b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> </b><br /> <b><br /> <b><b></b></b><br /> </b><br /> <b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> </b><br /> <b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> </b><br /> <b><br /> <b><b></b></b><br /> </b><br /> <b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> </b><br /> <b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> <b><b></b></b><br /> </b><br /> </b><br /> </div><br /></div><br /><div class="css-link"><br /><a href="http://helpsblogging.blogspot.com/" target="_blank">HelpsBlogging</a> →</div><br /><div class="denisx-link"><br /><span class="with-love">from Russia with love</span><span class="jq-link"><a href="http://util.factum.pro/jquery/" target="_blank">jQuery Docs with Version Switcher</a></span>Carefully made by <a href="http://www.denisx.ru/" target="_blank">Denis Khripkov</a></div><br /><div class="zemanta-pixie" style="height: 15px; margin-top: 10px;"><br /><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><br /></div><br />

pure-ccs3-digit-clock

...

Read more »