Pure CSS3 Digit Clock
Ένα όμορφο ρολόι για το blog / site σας. Μείνετε συντονισμένη και έρχονται και αλλα!
Αντιγραφή τον παρακάτω κώδικα:
<style>
/* global */
.myClockJS {
margin: 4em;
}
.myClockJS b {
display: block;
width: 100%;
font-weight: normal;
}
.myClockJS .inner {
margin: 0 auto;
position: relative;
}
/* dial clock */
.myClockJS .dial.inner {
width: 251px;
height: 251px;
}
.myClockJS .dial .shadow {
position: absolute;
http://twitter.com/foulscode/
Date: 2012-02-02
Prooflink: http://foulscode.blogspot.gr/2013/03/pure-css3-digit-clock.html
Name: Pure CSS3 Dial Clock without Images & Javascript100%;
height: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.myClockJS .dial .shadow-out {
margin: -9% 0 0 -9%;
padding: 9%;
-webkit-box-shadow: 0px 10px 30px #747788;
-moz-box-shadow: 0px 10px 30px #747788;
-ms-box-shadow: 0px 10px 30px #747788;
-o-box-shadow: 0px 10px 30px #747788;
box-shadow: 0px 10px 30px #747788;
background: #fff;
background: -webkit-linear-gradient(-90deg, #fff, #eaebed);
background: -moz-linear-gradient(-90deg, #fff, #eaebed);
background: -ms-linear-gradient(-90deg, #fff, #eaebed);
background: -o-linear-gradient(-90deg, #fff, #eaebed);
background: linear-gradient(-90deg, #fff, #eaebed);
}
.myClockJS .dial .shadow-in {
margin: -4% 0 0 -4%;
padding: 4%;
-webkit-box-shadow: 0px 3px 10px #747788 inset;
-moz-box-shadow: 0px 3px 10px #747788 inset;
-ms-box-shadow: 0px 3px 10px #747788 inset;
-o-box-shadow: 0px 3px 10px #747788 inset;
box-shadow: 0px 3px 10px #747788 inset;
background: #fff;
background: -webkit-linear-gradient(-90deg, #fff, #dce1e7);
background: -moz-linear-gradient(-90deg, #fff, #dce1e7);
background: -ms-linear-gradient(-90deg, #fff, #dce1e7);
background: -o-linear-gradient(-90deg, #fff, #dce1e7);
background: linear-gradient(-90deg, #fff, #dce1e7);
}
/* segments */
.myClockJS .dial .seg b {
position: absolute;
width: 1%;
height: 100%;
min-width: 1px;
left: 50%;
margin-left: -0.4%;
}
.myClockJS .dial .seg b b:after
, .myClockJS .dial .seg b b:before {
content: '';
position: absolute;
width: 100%;
height: 3%;
background-color: #aaa;
}
/* hours */
.myClockJS .dial .seg>b>b:before
, .myClockJS .dial .seg>b>b:after {
height: 6%;
width: 250%;
}
.myClockJS .dial .seg b:before {
bottom: 0;
}
/* setup all 60 segments */
.myClockJS .dial .seg>b:last-child{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.myClockJS .dial .seg>b>b:nth-child(2){
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
.myClockJS .dial .seg>b>b:last-child{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.myClockJS .dial .seg>b>b b{
-webkit-transform: rotate(6deg);
-moz-transform: rotate(6deg);
-ms-transform: rotate(6deg);
-o-transform: rotate(6deg);
transform: rotate(6deg);
}
.myClockJS .dial .seg>b>b>b:last-child{
-webkit-transform: rotate(18deg);
-moz-transform: rotate(18deg);
-ms-transform: rotate(18deg);
-o-transform: rotate(18deg);
transform: rotate(18deg);
}
/* arrows with clones, for shadow */
.myClockJS .dial .arr b {
position: absolute;
height: 100%;
left: 50%;
min-width: 1px;
}
.myClockJS .dial .arr b:after {
position: absolute;
width: 100%;
content: '';
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
width: 4.5%;
margin-left: -2.2%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(2):after {
height: 25%;
top: 25%;
background-color: #000;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
width: 3%;
margin-left: -1.4%;
}
.myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(4):after {
height: 37%;
top: 13%;
background-color: #000;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
width: 1%;
min-width: 1px;
margin-left: -0.3%;
}
.myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(7):after {
height: 67%;
background-color: #d70000;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(8) {
width: 8%;
margin-left: -3.9%;
}
.myClockJS .dial .arr b:nth-child(6):after
, .myClockJS .dial .arr b:nth-child(8):after {
height: 8%;
top: 46%;
background-color: #d70000;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
}
.myClockJS .dial .arr b:nth-child(1):after
, .myClockJS .dial .arr b:nth-child(3):after
, .myClockJS .dial .arr b:nth-child(5):after
, .myClockJS .dial .arr b:nth-child(6):after {
background-color: #000;
-webkit-box-shadow: 0 0 5px #000;
-moz-box-shadow: 0 0 5px #000;
-ms-box-shadow: 0 0 5px #000;
-o-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
opacity: 0.2;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(3) {
margin-top: 1.5%;
}
.myClockJS .dial .arr b:nth-child(6)
, .myClockJS .dial .arr b:nth-child(5) {
margin-top: 2%;
}
.myClockJS .dial .arr b {
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-ms-animation-iteration-count: infinite;
-ms-animation-timing-function: linear;
-o-animation-iteration-count: infinite;
-o-animation-timing-function: linear;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
.myClockJS .dial .arr b:nth-child(1)
, .myClockJS .dial .arr b:nth-child(2) {
-webkit-animation-duration: 43200s;
-moz-animation-duration: 43200s;
-ms-animation-duration: 43200s;
-o-animation-duration: 43200s;
animation-duration: 43200s;
}
.myClockJS .dial .arr b:nth-child(3)
, .myClockJS .dial .arr b:nth-child(4) {
-webkit-animation-duration: 3600s;
-moz-animation-duration: 3600s;
-ms-animation-duration: 3600s;
-o-animation-duration: 3600s;
animation-duration: 3600s;
}
.myClockJS .dial .arr b:nth-child(5)
, .myClockJS .dial .arr b:nth-child(7) {
-webkit-animation-duration: 60s;
-moz-animation-duration: 60s;
-ms-animation-duration: 60s;
-o-animation-duration: 60s;
animation-duration: 60s;
}
.css-link {
position: relative;
top: 1em;
text-align: center;
}
</style>
<!--
www.foulscode.blogspot.gr
-->
<!--
Get UTC time form server
?h=4 for Moscow UTC+4 time
-->
<link href="http://denisx.ru/myclockcss/keyframes_dial.php?h=4" rel="stylesheet" type="text/css" />
<div class="myClockJS">
<div class="inner dial">
<b class="shadow shadow-out"></b>
<b class="shadow shadow-in"></b>
<div class="seg">
<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>
<b class="arr">
<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-digit-clock.html">Pure CSS3 Digit Clock</a>→</p>
<p> </p>
DEMO
Αποθήκευση και είστε έτοιμη.
Σχόλια