【css3】用linear-gradient实现数字时钟

原创 老姚 随笔 思路 591阅读 2018-03-06 14:12:58 举报

看过《css揭秘》的同学都知道,我们可以使用线性渐变轻松画出如下颜色条纹:

根据 background 相关属性,我们可以改变条纹的位置和大小,比如下面 5 个图形:

根据 background 多重背景图片,我们就可以用一个 div 画出数字 8 了:

稍微改改颜色,0-910 个数字都有了:

再搞个冒号图形:

最后,数字时钟的实现:

参考实现来源

本文完。

评论 ( 6 )
最新评论
ls1210485244 2018-04-11 09:14:55 6F

66666666666666 待我先搬砖 中午学习一下

18830159776 2018-04-11 09:13:20 5F

老姚 3F 2018-03-07 15:31:08 4F

原先一直觉得没有。刚查了NodeList的方法,确实有。而HtmlCollection是没有的

lzh2740128806 2018-03-07 15:22:27 3F

digits 不是自带 forEach 方法吗

老姚 1F 2018-03-06 18:23:17 2F

之前没看js,看了一下,他是用的setTimeout

PF2 2018-03-06 17:56:06 1F

看那哥们写了一堆js,但是避免了重复渲染