CSS Clock

I had absolutely no idea how cool CSS could be until I looked around and found a few things to play with. Here we take a look at faking div's to look like a clock face & making the hands turn.

First a bit of html to create containers to style with.

<html>

<head>
    <link rel="stylesheet" type="text/css" href="index.css">
</head>

<body>
    <div id="clock">

        <div class="hours-container">
            <div class="hours"></div>
        </div>
        <div class="minutes-container">
            <div class="minutes"></div>
        </div>
        <div class="seconds-container">
            <div class="seconds"></div>
        </div>

    </div>
    <script type="text/javascript" src="index.js"></script>
</body>
</html>

First, we'll create a circle to act as our clock's "face".

#clock{
    border: solid black 10px;
    border-radius: 50%;
    height: 20em;
    width: 20em;
    position: relative;
}

Next we can stack each container for the clock's "hands" on each other above the clock face.

.minutes-container, .hours-container, .seconds-container {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

With each hand, we can change the styling gently to make each div a slightly different shape, mimicking the clock's hands.

.hours {
    background: #000;
    height: 20%;
    left: 48.75%;
    position: absolute;
    top: 30%;
    transform-origin: 50% 100%;
    width: 2.5%;
  }

  .minutes {
    background: #000;
    height: 40%;
    left: 49%;
    position: absolute;
    top: 10%;
    transform-origin: 50% 100%;
    width: 2%;
  }

  .seconds {
    background: #000;
    height: 45%;
    left: 49.5%;
    position: absolute;
    top: 14%;
    transform-origin: 50% 80%;
    width: 1%;
    z-index: 8;
  }

Now that we have our hands, we can use one keyframe to move the hands around 360 degrees.

  @keyframes rotate {
    100% {
      transform: rotateZ(360deg);
    }
  }

  .hours-container {
    animation: rotate 43200s infinite linear;
  }
  .minutes-container {
    animation: rotate 3600s infinite linear;
  }
  .seconds-container {
    animation: rotate 60s infinite linear;
  }

...and presto! Our clock is moving with the hands adjusting for one hour as they move around the clock. With a bit of javascript we can get the hands to point at the correct time.

function clockStart() {

    var date = new Date;
    var seconds = date.getSeconds();
    var minutes = date.getMinutes();
    var hours = date.getHours();

    var hands = [
      {
        hand: 'hours',
        angle: (hours * 30) + (minutes / 2)
      },
      {
        hand: 'minutes',
        angle: (minutes * 6)
      },
      {
        hand: 'seconds',
        angle: (seconds * 6)
      }
    ];

    for (var j = 0; j < hands.length; j++) {
      var elements = document.querySelectorAll('.' + hands[j].hand);
      for (var k = 0; k < elements.length; k++) {
          elements[k].style.webkitTransform = 'rotateZ('+ hands[j].angle +'deg)';
          elements[k].style.transform = 'rotateZ('+ hands[j].angle +'deg)';
          if (hands[j].hand === 'minutes') { elements[k].parentNode.setAttribute('data-second-angle', hands[j + 1].angle);}
      }
    }
  }
  clockStart();

Iterating through the hands we can set their angle dynamically with the #style method for each element.

A far cry from just fonts and borders, CSS is indeed a powerful tool for front end development.

Blog

Adam La Rosa

Join Our Newsletter. No Spam, Only the good stuff.

Related