Join the DZone community and get the full member experience.
Join For Freetoday – another great article – we are going to create pure css3 analog clock without any javascript (we are going to use power of css3 with animations to build it). our clocks have three arrows on the face – hour, minute and second. each of them is a narrow rectangle rotated to the desired angle. how does it work? – easy: i am using necessary delays for all these arrows. how exactly – read on.
for our clock, i have prepared -webkit and -moz styles. so please keep in mind that this clock will work only in firefox, and webkit-based browsers (chrome and safari). if you like – you always can expand the necessary styles (for the arrows/hands) for ie and opera browsers (by adding the same stylesheets with -ms and -o prefixes).
here are the example and downloadable package:
live demo
download in package
ok, download the example files and lets start coding !
step 1. html markup
the mark-up for our clock is not very simple – it contains a lot of div elements. each of them is one of our arrows/hands. here it is.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>analog clock with pure css3 (without javascript) | script tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<link href="css/clocks.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<h2>analog clock with pure css3 (without javascript)</h2>
<a href="http://www.script-tutorials.com/analog-clock-with-pure-css3/" class="stuts">back to original tutorial on <span>script tutorials</span></a>
</header>
<div class="container">
<div id="clock">
<div class="secs">
<div id="s1"></div><div id="s2"></div><div id="s3"></div>
<div id="s4"></div><div id="s5"></div><div id="s6"></div>
<div id="s7"></div><div id="s8"></div><div id="s9"></div>
<div id="s10"></div><div id="s11"></div><div id="s12"></div>
<div id="s13"></div><div id="s14"></div><div id="s15"></div>
<div id="s16"></div><div id="s17"></div><div id="s18"></div>
<div id="s19"></div><div id="s20"></div><div id="s21"></div>
<div id="s22"></div><div id="s23"></div><div id="s24"></div>
<div id="s25"></div><div id="s26"></div><div id="s27"></div>
<div id="s28"></div><div id="s29"></div><div id="s30"></div>
<div id="s31"></div><div id="s32"></div><div id="s33"></div>
<div id="s34"></div><div id="s35"></div><div id="s36"></div>
<div id="s37"></div><div id="s38"></div><div id="s39"></div>
<div id="s40"></div><div id="s41"></div><div id="s42"></div>
<div id="s43"></div><div id="s44"></div><div id="s45"></div>
<div id="s46"></div><div id="s47"></div><div id="s48"></div>
<div id="s49"></div><div id="s50"></div><div id="s51"></div>
<div id="s52"></div><div id="s53"></div><div id="s54"></div>
<div id="s55"></div><div id="s56"></div><div id="s57"></div>
<div id="s58"></div><div id="s59"></div><div id="s60"></div>
</div>
<div class="mins">
<div id="m1"></div><div id="m2"></div><div id="m3"></div>
<div id="m4"></div><div id="m5"></div><div id="m6"></div>
<div id="m7"></div><div id="m8"></div><div id="m9"></div>
<div id="m10"></div><div id="m11"></div><div id="m12"></div>
<div id="m13"></div><div id="m14"></div><div id="m15"></div>
<div id="m16"></div><div id="m17"></div><div id="m18"></div>
<div id="m19"></div><div id="m20"></div><div id="m21"></div>
<div id="m22"></div><div id="m23"></div><div id="m24"></div>
<div id="m25"></div><div id="m26"></div><div id="m27"></div>
<div id="m28"></div><div id="m29"></div><div id="m30"></div>
<div id="m31"></div><div id="m32"></div><div id="m33"></div>
<div id="m34"></div><div id="m35"></div><div id="m36"></div>
<div id="m37"></div><div id="m38"></div><div id="m39"></div>
<div id="m40"></div><div id="m41"></div><div id="m42"></div>
<div id="m43"></div><div id="m44"></div><div id="m45"></div>
<div id="m46"></div><div id="m47"></div><div id="m48"></div>
<div id="m49"></div><div id="m50"></div><div id="m51"></div>
<div id="m52"></div><div id="m53"></div><div id="m54"></div>
<div id="m55"></div><div id="m56"></div><div id="m57"></div>
<div id="m58"></div><div id="m59"></div><div id="m60"></div>
</div>
<div class="hours">
<div id="h1"></div><div id="h2"></div><div id="h3"></div>
<div id="h4"></div><div id="h5"></div><div id="h6"></div>
<div id="h7"></div><div id="h8"></div><div id="h9"></div>
<div id="h10"></div><div id="h11"></div><div id="h12"></div>
</div>
</div>
</div>
</body>
</html>
step 2. css
now – css styles. as usual, we won’t publish main page layout styles (layout.css). but, here are the stylesheets for our clock:
css/clocks.css
#clock {
background: #fff url(cface.png) 0 0 no-repeat;
height: 500px;
margin: 0 auto;
overflow: hidden;
position: relative;
width: 500px;
-webkit-border-radius: 250px;
-moz-border-radius: 250px;
-ms-border-radius: 250px;
-o-border-radius: 250px;
border-radius: 250px;
}
/* seconds */
@-webkit-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes secs_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .secs {
height: 400px;
left: 155px;
position: absolute;
top: 249px;
width: 400px;
}
#clock .secs div {
background-color: #860000;
height: 2px;
opacity: 0;
position: absolute;
width: 190px;
-moz-animation-name: secs_effect;
-moz-animation-duration: 60s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: secs_effect;
-webkit-animation-duration: 60s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #s1 {
-moz-transform: rotate(-90deg) translatex(130px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(130px);
-webkit-animation-delay: 0s;
}
#clock #s2 {
-moz-transform: rotate(-84deg) translatex(130px);
-moz-animation-delay: 1s;
-webkit-transform: rotate(-84deg) translatex(130px);
-webkit-animation-delay: 1s;
}
#clock #s3 {
-moz-transform: rotate(-78deg) translatex(130px);
-moz-animation-delay: 2s;
-webkit-transform: rotate(-78deg) translatex(130px);
-webkit-animation-delay: 2s;
}
...........
#clock #s60 {
-moz-transform: rotate(264deg) translatex(130px);
-moz-animation-delay: 59s;
-webkit-transform: rotate(264deg) translatex(130px);
-webkit-animation-delay: 59s;
}
/* minutes */
@-webkit-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes mins_effect {
0% {opacity: 1;}
1.66% {opacity: 1;}
1.67% {opacity: 0;}
100% {opacity: 0;}
}
#clock .mins {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .mins div {
background-color: #000086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: mins_effect;
-moz-animation-duration: 3600s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: mins_effect;
-webkit-animation-duration: 3600s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #m1 {
-moz-transform: rotate(-90deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-90deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #m2 {
-moz-transform: rotate(-84deg) translatex(110px);
-moz-animation-delay: 60s;
-webkit-transform: rotate(-84deg) translatex(110px);
-webkit-animation-delay: 60s;
}
#clock #m3 {
-moz-transform: rotate(-78deg) translatex(110px);
-moz-animation-delay: 120s;
-webkit-transform: rotate(-78deg) translatex(110px);
-webkit-animation-delay: 120s;
}
...........
#clock #m60 {
-moz-transform: rotate(264deg) translatex(110px);
-moz-animation-delay: 3540s;
-webkit-transform: rotate(264deg) translatex(110px);
-webkit-animation-delay: 3540s;
}
/* hours */
@-webkit-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes hours_effect {
0% {opacity: 1;}
8.33% {opacity: 1;}
8.34% {opacity: 0;}
100% {opacity: 0;}
}
#clock .hours {
height: 300px;
left: 175px;
position: absolute;
top: 249px;
width: 300px;
}
#clock .hours div {
background-color: #860086;
height: 3px;
opacity: 0;
position: absolute;
width: 150px;
-moz-animation-name: hours_effect;
-moz-animation-duration: 43200s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;
-webkit-animation-name: hours_effect;
-webkit-animation-duration: 43200s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;
}
#clock #h1 {
-moz-transform: rotate(-180deg) translatex(110px);
-moz-animation-delay: 0s;
-webkit-transform: rotate(-180deg) translatex(110px);
-webkit-animation-delay: 0s;
}
#clock #h2 {
-moz-transform: rotate(-150deg) translatex(110px);
-moz-animation-delay: 3600s;
-webkit-transform: rotate(-150deg) translatex(110px);
-webkit-animation-delay: 3600s;
}
#clock #h3 {
-moz-transform: rotate(-120deg) translatex(110px);
-moz-animation-delay: 7200s;
-webkit-transform: rotate(-120deg) translatex(110px);
-webkit-animation-delay: 7200s;
}
...........
#clock #h12 {
-moz-transform: rotate(150deg) translatex(110px);
-moz-animation-delay: 39600s;
-webkit-transform: rotate(150deg) translatex(110px);
-webkit-animation-delay: 39600s;
}
now – you can understand the main idea. i won’t publish all ‘recurring’ styles for each arrow. full code you can find in our package.
step 4. images
for our clock i have used a single image (as the face of our clock):
live demo
download in package
conclusion
finally we have built our clock! this was difficult, but we did it. i hope that this be will interesting addition to your website. don’t forget to tell thanks and leave a comment. good luck!
source: http://www.script-tutorials.com/analog-clock-with-pure-css3/
Clock (cryptography)
CSS
Analog (program)
JavaScript
Opinions expressed by DZone contributors are their own.
Comments