CSS3实现网页电子时钟动画效果
CSS3 的电子时钟效果,蛮适合用来练手动画和定位的。如果你正想搞个动起来的网页组件,这个挺值得一看。
CSS3 的伪元素用得溜,像:before
和:after
,可以在不动 HTML 结构的前提下搞出数字、指针啥的。搭配绝对定位,想放哪放哪,布局上也比较灵活。
动画这块,主要靠@keyframes和transform组合拳。用rotate()
转动指针,配上定时刷新的 JS,基本就能做出一个能跑的电子时钟了。响应也快,效果也挺流畅。
再讲点小技巧,比如加个transition过渡,让数字跳动更自然。想做响应式?加点媒体查询就搞定。用Flexbox或Grid排版,也轻松,屏幕再小都不怕。
JS 部分嘛,Date
对象来取当前时间,再用setInterval
去更新。逻辑不复杂,但要记得好时分秒的角度转换,不然指针方向会出戏。
压缩包里的texiao1075_1560680951
是完整源码,HTML、CSS、JS 都有,照着跑一遍就能搞明白。想研究其他风格的,可以看看下面几个类似的特效代码。
如果你想做个小组件展示,或者做个前端面试的作品展示,拿这个时钟练练手,还是蛮有看头的。
下载地址
用户评论