.ani-box {height: 550px;}
.clock {
padding: 0em;
margin: 2em auto 2em auto;
width: 420px;
height: 420px;
position: relative;
}
/* ========== The Round face =========== */
.face {
border: 5px solid #444;
width: 410px;
height: 410px;
top: 50%;
left: 50%;
position: absolute;
margin-top: -210px;
margin-left: -210px;
background-color: #B6862E;
border-radius: 50%;
box-shadow: 0 0 10px 60px #b6862E inset, 0 0 80px 10px #000010;
}
.face {
background: #fefcea;
background: -moz-radial-gradient(center, ellipse cover, #fefcea 0%, #f1da36 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#fefcea), color-stop(100%,#f1da36));
background: -webkit-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%);
background: -o-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%);
background: -ms-radial-gradient(center, ellipse cover, #fefcea 0%,#f1da36 100%);
background: radial-gradient(ellipse at center, #fefcea 0%,#f1da36 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefcea', endColorstr='#f1da36',GradientType=1 );
}
/* The Numbers on the Face */
#c1, #c2, #c3, #c4, #c5, #c6, #c7, #c8, #c9, #c10, #c11, #c12 {
font-size: 30px;
color: #FFFFFF;
position: absolute;
width: 40px;
height: 40px;
top: 50%;
left: 50%;
text-align: center;
text-shadow: 0 0 3px #000000;
}
#c1 {margin:-170px 0 0 70px;}
#c2 {margin:-105px 0 0 133px;}
#c3 {margin: -20px 0 0 155px;}
#c4 {margin: 70px 0 0 134px;}
#c5 {margin: 135px 0 0 70px;}
#c6 {margin: 160px 0 0 -20px;}
#c7 {margin: 135px 0 0 -110px;}
#c8 {margin: 70px 0 0 -174px;}
#c9 {margin: -20px 0 0 -195px;}
#c10 {margin:-105px 0 0 -173px;}
#c11 {margin:-170px 0 0 -110px;}
#c12 {margin:-195px 0 0 -20px;}
/* ============ The Hands ============ */
.big-hand, .little-hand {
height: 351px;
width: 30px;
z-index: 2;
position: absolute;
top: 50%;
left: 50%;
margin-top: -175px;
margin-left: -11px;
animation: hands 3600s linear infinite;
}
.little-hand {
height: 251px;
width: 30px;
z-index: 1;
margin-top: -125px;
animation: hand-five 43200s linear infinite;
}
.second {
position: absolute;
width: 3px;
height: 360px;
top: 50%;
left: 50%;
margin: -180px 0 0 3px;
z-index: 3;
animation: hands 60s linear infinite;
}
/* ========== Components of the hands ========== */
.point {
margin:0 0 0 5.5px;
width: 0;
height: 0;
z-index: 2;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 30px solid #727272;
position: relative;
}
.shaft, .shaft-l {
width: 10px;
height: 130px;
z-index: 1;
background-color: #000000;
margin:0 0 0 10px;
position: relative;
background: #454f77;
}
.shaft-l {
height: 80px;
}
.shaft-s {
position: absolute;
width: 3px;
height: 180px;
background-color: #CC3300;
}
/* Round part of the base of the Hands */
.ball {
margin:0;
width: 30px;
height: 30px;
background: #000000;
position: relative;
border-radius: 50%;
}
.ball-s {
margin: 170px 0 0 -9px;
width: 20px;
height: 20px;
background: red;
position: relative;
border-radius: 50%;
}
/* ===== Comment below clock ===== */
.comment {
margin: 1em auto 1em auto;
width: 80%;
position: relative;
font-size: 1.5em;
color: #000000;
text-align: center;
line-height: 1.6em;
}
/* Hand-Five to move HOUR hand to Five */
@keyframes hand-five {
0% {transform:rotate(153deg);}
100% {transform:rotate(513deg);}
}
@keyframes hands {
0% {transform:rotate(-360deg);}
100% {transform:rotate( 0deg);}
}
1
2
3
4
5
6
7
8
9
10
11
12
Working CSS3 Clock – Always starts at Five-O’clock. This CSS animation clock is created with pure CSS and with adjustments could be used as a timer. By adding some javascript you can pull the correct starting time from the computer/server operating system.
]]>