CSS动画篇之炫酷时钟之时钟墙
通过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)
CSS动画篇之炫酷时钟之时钟墙相关推荐
- 这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码,非常好看,里面充分的利用了对jq+css的使用,希望对于各位程序猿有帮助 展示效果 项目目录展示 html代码 css部分代码 * { ...
- iOS动画开发之五——炫酷的粒子效果
iOS动画开发之五--炫酷的粒子效果 在上几篇博客中,我们对UIView层的动画以及iOS的核心动画做了介绍,基本已经可以满足iOS应用项目中所有的动画需求,如果你觉得那些都还不够炫酷,亦或是你灵光一 ...
- html5基于Echarts制作3D炫酷世界地图地球制作,地图勾起动画,非常炫酷。
❉ html5基于echarts.js制作3D炫酷世界地图地球仪动画 `html5基于echarts.js制作3D炫酷世界地图地球仪动画,业务迁移热点显示动画,地图勾起动画,非常炫酷.ps:涉及跨域, ...
- 【CSS3】CSS3动画——前端的炫酷
[CSS3]CSS3动画--前端的炫酷 博客说明 文章所涉及的部分资料来自互联网整理,当然还有自己个人的总结和看法,分享的目的在于共建社区和巩固自己.引用的资料如有侵权,请联系本人删除!幸好我在,感谢 ...
- 【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面 关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
- linux内核动画,8个炫酷的HTML5动画、应用和游戏
导读 随着Web技术的不断发展,呈现在我们眼前的Web页面不仅有着越来越丰富的网页元素,而且网页之间的交互也越来越炫酷了.很多开发者已经利用HTML5开发了不少HTML5动画.应用和游戏,本文也主要分 ...
- 人形时钟代码php,[精品]炫酷的人形时钟代码
分享一款:[精品]炫酷的人形时钟代码 你浪费的每一分每一秒的同时,别人在不停息的努力. 知识拓展: 如今我们只需瞧一下钟就能说出具体时间,我们把这看成是很自然的事.但在长达几千年的时间里,根本就没有任 ...
- 炫酷JavaScript转盘时钟动态js特效
下载地址 一款炫酷JavaScript转盘时钟动态特效,该时钟跟随系统时间,设计并计算了每个时刻指针所走过的角度,效果真实逼真. dd:
- html顺序进场动画,十六种炫酷纯css加载动画(一)
一个好的开篇,会给你这个项目增加不少分值. 有没有遇到过打开页面加载一段时间,页面内容才加载出来.在等待加载的过程中页面却是空白页,给用户的体验特别不好,会让项目降一个档次.下面的十六种炫酷炸裂的cs ...
最新文章
- Python编写爬虫编写到Excel中
- Sentinel 1.5.0 正式发布,引入 Reactive 支持
- SE43自定义sap菜单
- 选择排序-冒泡排序-归并排序-快速排序-插入排序
- linux httpd 开机启动脚本,httpd服务如何开机启动
- iOS CoreData简单入门 - Swift版
- 【问题】父套子时,‘阻止子元素的外边距传递给父元素’与闭合浮动
- 【iOS开发-35】有了ARC内存管理机制,是否还须要操心内存溢出等问题?——面试必备...
- Python笔记4 实例之批量修改文件名
- 论文赏析[NAACL19]无监督循环神经网络文法 (URNNG)
- seata 使用oracle_使用Seata彻底解决Spring Cloud中的分布式事务问题!
- 黑马程序员Java零基础视频教程(2022最新Java)B站视频学习笔记-Day8-面向对象
- cam350菜单怎么切换成中文_CAM350菜单中文详解
- speex 编码简介
- 红黑树模拟软件_红黑树,超强动静图详解,简单易懂
- c++求一个数的因子
- 解决Windows 无法打开文件夹 找不到应用程序
- 一个炫酷的opengles2.0翻页效果(安卓上opengles2.0 翻书效果附源码)
- 【软考】高级系统架构设计师学习经验分享
- 计算机网络 交换机配置及VLAN划分