/ Web Dev Zone
Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Analog Clock in Pure CSS3: Accurate Time Without JavaScript

DZone's Guide to

Analog Clock in Pure CSS3: Accurate Time Without JavaScript

by
·
Jan. 08, 12 · Web Dev Zone ·
Free Resource

Comment (2)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Today – 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):

 

Analog Clock with Pure CSS3 | Script Tutorials


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/

Deploying code to production can be filled with uncertainty. Reduce the risks, and deploy earlier and more often. Download this free guide to learn more. Brought to you in partnership with Rollbar.

Like This Article? Read More From DZone

Proposed Jakarta EE Design Principles
Advanced Research Initiatives: Focus on the Future
How to Configure NGINX High Availability Cluster Using Pacemaker on Ubuntu 16.04

Free DZone Refcard

Node.js
DOWNLOAD
Topics:

Comment (2)

Save
Tweet
{{ articles[0].views | formatCount}} Views

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)
Top 10 JavaScript Errors and How to Avoid Them
App-centric Monitoring Alternatives to New Relic

Web Dev Partner Resources

How Instacart Improves User Experiences and Reduces Mean-Time-to-Resolve (MTTR)
Top 10 JavaScript Errors and How to Avoid Them
App-centric Monitoring Alternatives to New Relic

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.linkDescription }}

{{ parent.urlSource.name }}
by {{ parent.authors[0].realName || parent.author}}
· {{ parent.articleDate | date:'MMM. dd, yyyy' }} {{ parent.linkDate | date:'MMM. dd, yyyy' }}
· {{ parent.portal.name }} Zone