css3一个简易的 LED 数字时钟实现方法
GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用!
【 如果你想靠AI翻身,你先需要一个靠谱的工具! 】
这个应该是已经有很多人做过的东西,我应该只是算手痒,想写一下,所以,花了点时间折腾了这个,顺便把 Dark Mode 的处理也加上了。
首先可以很明确的一点,这个真没技术含量存在,只是需要点耐心。
LED 数字包含了左右各两条线,中间三条线,一共 7 条线。所以,为了能够更容易辨识,在写 demo 的时候,我直接这样写了。
1 2 3 4 5 6 7 8 9 | < div class = "digital digital_0" > < span class = "c1" ></ span > < span class = "c2" ></ span > < span class = "c3" ></ span > < span class = "l1" ></ span > < span class = "l2" ></ span > < span class = "r1" ></ span > < span class = "r2" ></ span > </ div > |
至于 digital_0 这个的作用,其实很简单,就是控制从 0 ~ 9 这十个数字的变化而存在的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | .digital_ 1 .c 1 , .digital_ 1 .c 2 , .digital_ 1 .c 3 , .digital_ 1 .l 1 , .digital_ 1 .l 2 , .digital_ 2 .l 1 , .digital_ 2 .r 2 , .digital_ 3 .l 1 , .digital_ 3 .l 2 , .digital_ 4 .c 1 , .digital_ 4 .c 3 , .digital_ 4 .l 2 , .digital_ 5 .l 2 , .digital_ 5 .r 1 , .digital_ 6 .r 1 , .digital_ 7 .c 2 , .digital_ 7 .c 3 , .digital_ 7 .l 1 , .digital_ 7 .l 2 , .digital_ 9 .l 2 , .digital_ 0 .c 2 { animation: changeDigital 200 ms 0 ms 1 ease-in forwards; } |
这里使用了一个 animation 动画,并且时间是 200ms,主要是为了让某些部分消失的时候,有一个过渡效果。
那么剩下来的就是最需要耐心的地方了,调整控制那 7 条线的位置,同时还要考虑每条线是带有斜角的,而且还稍微有点圆弧的感觉。带点圆弧的感觉那么直接使用 border-radius 就可以了,至于那个斜角的话,如果各位知道 CSS 中用边框画三角的方法,那么就应该明白怎么做这个斜角了。
当我们要画三角的时候,width 和 height 都是为 0,然后用过控制 border-width 而得到最终的三角的大小,那么这里如果我们根据线条的位置,适当选择 width 和 height 有具体的值,是不是就有斜角的感觉了呢。
接着,需要注意横着的中间那根线,也就是 .c2 这个元素,线条两边是三角突出的,可以实现的方式也很多,这里我选择使用 :after 和 :before 相叠加。
最后就是对每个元素的位置做调整,控制好大小位置就可以了,因为是使用定位的方式来操作,所以,调整起来还是很简单的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 | .digital span { position : absolute ; border-radius: 50 vh; box-sizing: border-box; } .digital .c 1 , .digital .c 2 , .digital .c 3 { height : 0 ; width : 26px ; border-left : 4px solid transparent ; border-right : 4px solid transparent ; } .digital .c 1 { top : 0 ; left : 0 ; border-top : 4px solid currentColor; } .digital .c 2 { top : 50% ; left : 0 ; margin-top : -2px ; } .digital .c 2: before, .digital .c 2: after { content : "" ; height : 0 ; width : 24px ; border-left : 2px solid transparent ; border-right : 2px solid transparent ; box-sizing: border-box; } .digital .c 2: before { position : absolute ; top : 0 ; left : -3px ; border-bottom : 2px solid currentColor; } .digital .c 2: after { position : absolute ; top : 2px ; left : -3px ; border-top : 2px solid currentColor; } .digital .c 3 { bottom : 0 ; left : 0 ; border-bottom : 4px solid currentColor; } .digital .l 1 , .digital .l 2 { height : 21px ; width : 0 ; left : 0 ; border-top : 2px solid transparent ; border-bottom : 2px solid transparent ; border-left : 4px solid currentColor; } .digital .l 1 { top : 1px ; border-top-width : 4px ; } .digital .l 2 { top : 24px ; border-bottom-width : 4px ; } .digital .r 1 , .digital .r 2 { height : 21px ; width : 0 ; right : 0 ; border-top : 2px solid transparent ; border-bottom : 2px solid transparent ; border-right : 4px solid currentColor; } .digital .r 1 { top : 1px ; border-top-width : 4px ; } .digital .r 2 { top : 24px ; border-bottom-width : 4px ; } |
做完这些,剩下的就是简单的对外层元素做点优化,比如稍微倾斜一点。
1 2 3 4 5 6 7 | .digital { position : relative ; width : 26px ; height : 46px ; margin-left : 10px ; transform: skew( -6 deg); } |
哦,忘了说了,这里的边框颜色我选择使用 currentColor 的方式,这样可以在暗黑模式切换的过程中,只需要修改 body 中的文字颜色和背景色就可以了。currentColor 会选择文字颜色来使用。
样式处理完之后,接着就是添加点 JS 来显示时钟了,这个没啥好说的,只要把两个数字整出来放到不同的 div 中就好了。这里我取个位数的时候,是用 m%10 的方式取余;取十位数的时候是通过 parseInt(m/10) 的方式取整。取出来之后分别放到想对应的 div 中就 ok 了。
demo地址:http://lab.tianyizone.com/demo/digital_number.html
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
- 这篇文章主要介绍了纯CSS3如何实现运行的时钟,帮助大家更好的制作CSS3特效,美化网页,感兴趣的朋友可以了解下。2021-01-25
- 这篇文章主要介绍了css3 利用transform打造走动的2D时钟,帮助大家更好的利用cSS3制作特效,美化自身网页,感兴趣的朋友可以了解下2020-10-20
- 这篇文章主要介绍了利用CSS3 动画 绘画 圆形动态时钟的相关资料,需要的朋友可以参考下2018-03-20
- 这篇文章主要介绍了CSS实现漂亮的时钟动画效果的实例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2021-03-29
最新评论