CSS动画中炫酷时钟的时钟墙

时间：2023-03-29 11:03:46 HTML

你一定见过很多用CSS制作的时钟，但是像下面这样的时钟是不是很少见呢？整个时钟由许多小时钟组成，每秒通过多个时钟动画切换时间，不得不说这个设计很酷很有特色。前言看到这个动画效果，你有什么感想，又会如何实现呢？你可以先思考一下你的答案，看是否符合本文的思路。由于本文讨论的是CSS动画，界面上那么多的时钟尽量不要是真正的多时钟，这样操作DOM和JS的逻辑就太复杂了，没有这种设计理念那么简单美观。ImplementationProcessHTML仔细看这个动画，可以看到我们可以把整个时钟分成5块，即21:58，小时和分钟的个位数和十位数，再加上中间的冒号。那么我们的HTML代码可以分成5个区域如下：digitseparator">

每个区域由多个小块组成，只需要加上区域内固定数量的元素。比如上面第一个区域的编号是24（4*6）。...省略CSS每个时钟的两根指针都会有“before”和“after”伪元素，CSS代码如下：.clock{border-radius:50%;宽度：60px；高度：60px；盒子阴影：02px5pxrgba(0,0,0,0.3);位置：相对；背景颜色：#fff;}.clock:before,.clock:after{content:'';显示：内联块；高度：45%；宽度：4px；背景色：#444；位置：绝对；左：50%；顶部：8%；左边距：-2px；变换原点：2px100%；transition:all10scubic-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是默认显示样式。整体设置数字的代码如下：functionsetNumber(group,number){varclocks=group.children;varnumbers=['266352355555555551451664','263013500550055024131664','266316352645526451631664','266316352645163526451664','232355555145163500550014','266352645163163526451664','266352645163523551451664','266316350055005500550014','266352355145523551451664','266352355145163500550014']for(vari=0;i<24;i++){clocks[i].classList.value='clockpos'+numbers[number][i]}}程序初始化时获取当前时间，每次调用4次setNumber方法显示当前时间的四个位置之一。functionwriteTime(){varnow=newDate();varhour=now.getHours().toString();varminute=now.getMinutes().toString();varnumber=pad(hour,2)+pad(minute,2);setNumber(组[0],数字[0]);setNumber(组[1],数字[1]);setNumber(组[3],数字[2]);setNumber(groups[4],number[3]);}再加上每分钟定时更新数据的逻辑，我们的时钟动画就开始动了。函数runEveryMinute(f){varnow=newDate();vartimeUntilNextMinute=60000-(now.getSeconds()*1000+now.getMilliseconds());setTimeout(function(){f();setInterval(f,60000);},timeUntilNextMinute);}还有个位用0补的情况，中间冒号的初始化就不详细说了.有兴趣的可以看源码了解一下。综上所述，整体动画制作完成。与您最初的想法有何不同？如果大家有更好的想法，可以在评论区留言讨论。觉得有用，觉得有用，点个赞，关注，收藏，说不定哪天你会用到呢~链接the-making-of-cooper-hewitt-clock-wall关注前端开发，分享前端-端相关技术干货，公众号：南城大学前端（ID：nanchengfe）

上一篇：组件化-模块化

下一篇：6s到1s：双端应用秒级优化之路

CSS动画中炫酷时钟的时钟墙相关文章