Pure CSS3 Dial Clock v2


Ένα ρολοι σαν το προηγούμενο.




Αντιγραφή τον παρακάτω κώδικα:




<style>
/* *************************************** */
/*  by http://foulscode.blogspot.gr */
@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: 48px/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;
}
</style>
<!--http://foulscode.blogspot.gr
 Name: Pure CSS3 Digit Clock without Images & Javascript
-->
<!--
 Get UTC time form server
 ?h=4 for Moscow UTC+4 time
-->
<link href="http://denisx.ru/myclockcss/keyframes_digit.php?h=4" rel="stylesheet" type="text/css" />
<div class="myClockJS">
<div class="digit">
<b class="arr">
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
<b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
<b><b></b></b>
</b>
</b>
</div>
</div>
<p class="css-link"><a target="_blank" href="http://foulscode.blogspot.gr/2013/03/pure-css3-dial-clock-v2.html">Pure CSS3 Dial Clock</a>→</p>


DEMO



Αποθήκευση και αυτό ήταν.

Μοιραστείτε το με τους φίλους σας στο twitter / facebook και βοηθήστε μας.

Σχόλια