CSS Artifact: Make an Interactive Clock Using Pure CSS

CSS is a style sheet language used for web design and layout, and it is an important building block for building modern and functional websites. In this article, we'll discuss how to use CSS to create a fun and useful example: an interactive clock.

Step 1: HTML Structure

First, we need to create an HTML structure to house our CSS code. In this case, we choose the basic HTML structure to build our clock.

<!DOCTYPE html>
<html>
  <head>
    <title>CSS时钟示例</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <div class="clock">
      <div class="hour-hand"></div>
      <div class="minute-hand"></div>
      <div class="second-hand"></div>
      <div class="center"></div>
    </div>
  </body>
</html>

We created a basic HTML structure containing a clock div and four div elements. Among them, the hour-hand, minute-hand and second-hand div elements are used to display the hour hand, minute hand and second hand of the clock, and the center div element is used to place the center point of the clock.

Step 2: CSS Style Design

Next, we'll use CSS styles to style the clock. We use the rotation, transform and animation properties provided by CSS3 to make our clock.

.clock {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin: 50px auto;
  position: relative;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 
              inset 0 0 0 3px #FFF, 
              inset 0 0 5px rgba(0, 0, 0, 0.2), 
              0 2px 2px rgba(0, 0, 0, 0.1);
}
.hour-hand,
.minute-hand,
.second-hand {
  width: 50%;
  height: 6px;
  background: #333;
  position: absolute;
  border-radius: 10px;
  transform-origin: 100%;
  transform: rotate(90deg);
}
.hour-hand {
  background: #FFF;
  height: 8px;
  margin: -4px 0 0 -8%;
  transform-origin: 80%;
}
.minute-hand {
  margin: -3px 0 0 -6%;
  transform-origin: 70%;
}
.second-hand {
  margin: -1px 0 0 -5%;
  transform-origin: 60%;
}
.center {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.second-hand {
  animation: rotate 60s linear infinite;
}
.minute-hand {
  animation: rotate 3600s linear infinite;
}
.hour-hand {
  animation: rotate 43200s linear infinite;
}

The above CSS code achieves:

The design of the clock shape, including style and size

.clock {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  margin: 50px auto;
  position: relative;
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.1), 
              inset 0 0 0 3px #FFF, 
              inset 0 0 5px rgba(0, 0, 0, 0.2), 
              0 2px 2px rgba(0, 0, 0, 0.1);
}

Design of the hour, minute and second hands

.hour-hand,
.minute-hand,
.second-hand {
  width: 50%;
  height: 6px;
  background: #333;
  position: absolute;
  border-radius: 10px;
  transform-origin: 100%;
  transform: rotate(90deg);
}

Each pointer structure is different, and the characters they all have

.hour-hand {
  background: #FFF;
  height: 8px;
  margin: -4px 0 0 -8%;
  transform-origin: 80%;
}
.minute-hand {
  margin: -3px 0 0 -6%;
  transform-origin: 70%;
}
.second-hand {
  margin: -1px 0 0 -5%;
  transform-origin: 60%;
}

clock center design

.center {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #333;
  border-radius: 50%;
  left: 50%;
  top: 50%;
  margin: -2px 0 0 -2px;
}

Design of the keyframes attribute

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.second-hand {
  animation: rotate 60s linear infinite;
}
.minute-hand {
  animation: rotate 3600s linear infinite;
}
.hour-hand {
  animation: rotate 43200s linear infinite;
}

Our CSS clock is done, but we still need to know what the keyframes property does. In CSS, the keyframe rule is used to define the intermediate steps of an object in an animation sequence, expressed as a percentage.

In this example we use keyframe to create an animation sequence called "rotate". Each pointer has different animation properties to control their rotation speed and duration.

Step 3: Interaction Effects

Finally, we'll implement the interactivity by adding some JavaScript code. Now we can change the position of the pointer in real time through JavaScript scripts.

var hourHand = document.querySelector('.hour-hand');
var minuteHand = document.querySelector('.minute-hand');
var secondHand = document.querySelector('.second-hand');

function setDate() {
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  var hourDegrees = ((hours / 12) * 360) + 90;
  hourHand.style.transform = `rotate(${hourDegrees}deg)`;

  var minuteDegrees = ((minutes / 60) * 360) + 90;
  minuteHand.style.transform = `rotate(${minuteDegrees}deg)`;

  var secondDegrees = ((seconds / 60) * 360) + 90;
  secondHand.style.transform = `rotate(${secondDegrees}deg)`;
}

setInterval(setDate, 1000);

The JavaScript code involved in the example calculates the current time based on the rotation angle of the pointer and uses style.transformproperties to apply them to the corresponding pointer. Additionally, we use the setInterval method to periodically run our setDate function.

After completing these steps, we can see our clock running in real time in the browser.

in conclusion

CSS is a very powerful tool to create stunning interactive visual effects by using CSS3 properties and animations. This clock example shows us the power of CSS, and it works even better with JavaScript code. In the process of learning CSS, finding interesting and practical examples will greatly benefit your learning.

If you'd like to learn more about CSS, read our other CSS tutorials and learning materials, which will help you further master various CSS properties and techniques, and how to apply them to your web design.

CSS Artifact: Make an Interactive Clock Using Pure CSS

Guess you like