CSS animation article cool clock clock wall

You must have seen a lot of clocks made by CSS, but are clocks like the following rare? The entire clock is composed of many small clocks, and the time is switched through the animation of multiple clocks every second. I have to say that this design is very cool and unique.

foreword

What ideas do you have when you see this animation effect, and how would you implement it? You can think about your answer first to see if it is consistent with the idea of this article. Since this article is about CSS animation, so many clocks on the interface are not really multiple clocks as much as possible, so the logic of operating DOM and JS is too complicated, and it is not as simple and beautiful as this design concept.

Implementation process

HTML

When you look at this animation carefully, you can see that we can divide the entire clock into 5 parts, namely 2 1 : 5 8, the one and ten digits of the hour and minute, plus a colon in the middle. Then our HTML code can be divided into 5 areas as follows:

 <div class="display">
  <div class="digit">
  </div>
  <div class="digit">
  </div>
  <div class="digit separator">
  </div>
  <div class="digit">
  </div>
  <div class="digit">
  </div>
</div>

Each area is composed of multiple small blocks, and only a fixed number of elements need to be added to the area. For example, the number of the first area above is 24 (4 * 6).

 <div class="digit">
    <div class="clock"></div>
    <div class="clock"></div>
    <div class="clock"></div>
    ...省略
    <div class="clock"></div>
    <div class="clock"></div>
    <div class="clock"></div>
  </div>

CSS

The two hands of each clock will be implemented with "before" and "after" pseudo-elements. The CSS code looks like this:

 .clock {
  border-radius: 50%;
  width: 60px;
  height: 60px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  position: relative;
  background-color: #fff;
}

.clock:before, 
.clock:after {
  content: '';
  display: inline-block;
  height: 45%;
  width: 4px;
  background-color: #444;
  position: absolute;
  left: 50%;
  top: 8%;
  margin-left: -2px;
  transform-origin: 2px 100%;
  transition: all 10s cubic-bezier(0.5, 0, 0.5, 1);
}

The end result is this:

In fact, if you look closely, our clocks only draw simple shapes, they only need to be able to position the hands in 6 positions as follows:

This is achieved by adding different classes that change the rotation angle of the pseudo-elements around their respective ones.

 .clock.pos2:before {
  transform: rotate(180deg);
}

.clock.pos2:after {
  transform: rotate(90deg);
}

JS

Now everything is ready, just how to display the correct numbers, the numbers that need to be displayed are 0-9, then just define an array of length 10, each item of the array corresponds to the position of the clock, and so on , the length of the sub-array is 24 bits, corresponding to the 24 sub-clocks mentioned above. The content of the sub-array is based on the above-mentioned, and there are only 1-6 cases, and 0 is the default display style. The code to set the numbers as a whole is as follows:

 function setNumber(group, number) {
    var clocks = group.children;
    var numbers = [
        '266352355555555551451664',
        '263013500550055024131664',
        '266316352645526451631664',
        '266316352645163526451664',
        '232355555145163500550014',
        '266352645163163526451664',
        '266352645163523551451664',
        '266316350055005500550014',
        '266352355145523551451664',
        '266352355145163500550014'
    ]
    for(var i = 0; i < 24; i++) {
        clocks[i].classList.value = 'clock pos' + numbers[number][i]
    }
}

The current time is obtained when the program is initialized, and the current time can be displayed by calling the setNumber method four times in each of the four locations.

 function writeTime() {
    var now = new Date();
    var hour = now.getHours().toString();
    var minute = now.getMinutes().toString();
    var number = pad(hour,2) + pad(minute, 2);
    setNumber(groups[0], number[0]);
    setNumber(groups[1], number[1]);
    setNumber(groups[3], number[2]);
    setNumber(groups[4], number[3]);
}

Coupled with the logic of regularly updating data every minute, our clock animation will move.

 function runEveryMinute(f) {
    var now = new Date();
    var timeUntilNextMinute = 60000 - (now.getSeconds() * 1000 + now.getMilliseconds());

    setTimeout(function(){
        f();
        setInterval(f, 60000);
    }, timeUntilNextMinute);
}

There is also no detailed description of the case where the single digit is filled with 0, and the initialization of the middle colon. If you are interested, you can read the source code.

Summarize

At this point, the overall animation is completed. What is the difference from your initial idea? Do you have better ideas? You can leave a message in the comment area for discussion. If you find it useful, if you find it useful, like, follow, bookmark, maybe one day you will use it~

Link

the-making-of-cooper-hewitt-clock-wall

Focus on front-end development, share dry goods related to front-end technology, public account: Nancheng Front-end (ID: nanchengfe)