通过CSS制作的时钟大家必定看到的多了，然而像上面这样的时钟是不是很少见，整个时钟是有很多个小的时钟组合而成，每秒通过多个时钟的动画来切换工夫，不得不说这个设计是十分的炫酷且有特色。
前言
看到这个动画成果你有什么思路，你会怎么实现呢？能够先想一下你的答案，看看与本文的思路是否统一。本文既然是探讨的CSS动画，那么界面上这么多的时钟是尽可能的不是真的多个时钟，那样操作DOM及JS的逻辑就太简单了，也没有和此设计理念一样，简洁且柔美。
实现过程
HTML
当你认真看这个动图的时候能够看出咱们能够把这整个时钟分为5块内容，即 2 1 : 5 8，小时和分钟的个位数和十位数，再加两头的冒号。那么咱们的HTML代码能够按如下所示分为5块区域：
<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>每个区域外面都是由多个小块组成，只须要在该区域内加上固定的元素数量。比方下面的第一个区域的数量就是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
每个时钟的两个指针将有“before” 和“after”伪元素实现，CSS代码如下所示：
.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);}最终的后果是这样的：
其实认真看咱们的时钟只绘制了简略的形态，它们只须要可能将指针定位如下在6个地位即可：
通过减少不同的类来实现，这些类扭转了伪元素围绕其各自的旋转角度。
.clock.pos2:before { transform: rotate(180deg);}.clock.pos2:after { transform: rotate(90deg);}JS
当初所有都筹备好了，就差怎么显示正确的数字，须要显示的数字就0-9，那么只需定义一个长度为10的数组，数组的每一项则对应上时钟的地位，以此类推，子数组的长度则是24位，对应下面提到的24个子时钟，子数组的内容基于下面提到的，只会有1-6的状况，0是默认的显示款式。整体设置数字的代码如下：
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] }}在程序初始化的时候获取以后工夫，四个地位别离调用四次setNumber办法即可显示以后的工夫。
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]);}再加上每一分钟的定时更新数据的逻辑，咱们的时钟动画就静止起来啦。
function runEveryMinute(f) { var now = new Date(); var timeUntilNextMinute = 60000 - (now.getSeconds() * 1000 + now.getMilliseconds()); setTimeout(function(){ f(); setInterval(f, 60000); }, timeUntilNextMinute);}外面还有对于个位数补0的状况，以及两头冒号的初始化没有具体阐明，有趣味的能够看源码理解。
总结
到此整体的动画就实现完了，和你最开始的想法有什么区别呢，你是否有更好的想法能够评论区留言探讨。如果感觉有用，如果感觉有用，点赞，关注，珍藏起来，说不定哪天就用上啦~
链接
the-making-of-cooper-hewitt-clock-wall
专一前端开发，分享前端相干技术干货，公众号：南城大前端（ID: nanchengfe）