/ 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

A true open source, API-first CMS — giving you the power to think outside the webpage. Try it for free.

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/

The New Standard for a Hybrid CMS: GraphQL Support, Scripting as a Service, SPA Support. Watch on-demand now.

Like This Article? Read More From DZone

Elasticsearch on Google Cloud Platform
When Scrum Is Not The Right Answer
Shadow Root DOM and Custom HTML Tags Automation Using Selenium

Free DZone Refcard

Low-Code Application Development
DOWNLOAD
Topics:

Comment (2)

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

Opinions expressed by DZone contributors are their own.

Web Dev Partner Resources

Bring collaborative document editing to your web app with ONLYOFFICE
Building & Managing Single Page Apps in your CMS [eBook]
The Ultimate 36-Point Checklist for Choosing a Headless CMS (eBook)
From Brick and Mortar to Bits and Bytes: Why Cognitive Services are Transforming eCommerce
ONLYOFFICE code samples: see how editors will work within your app
HERE topples Google to take first place
HERE ranks #1 for developers against Google and Mapbox
Welcome to the Cognitive Era - The New Generation of Computing
A World Transformed: Building Smarter, Next Generation Apps with Cognitive Services
Detailed documentation for ONLYOFFICE integration
Get 20 location-enabled APIs and SDKs for free with HERE
Containers 101: Everything You Need to Know About Containers [eBook]

Web Dev Partner Resources

Bring collaborative document editing to your web app with ONLYOFFICE
Building & Managing Single Page Apps in your CMS [eBook]
The Ultimate 36-Point Checklist for Choosing a Headless CMS (eBook)
From Brick and Mortar to Bits and Bytes: Why Cognitive Services are Transforming eCommerce

{{ 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