CSS写的LED滚动屏

前段时间用的MIUI主题有一个桌面小组件，是一个LED滚动屏的效果，我就开始琢磨怎么用CSS写出来，经过一段时间的思考，就开始上手做了，虽然不太实用，可能终有会用到的地方吧，比如现在流行的大数据大屏，加一个这种高仿的LED滚动屏，效果肯定要比真的LED滚动屏效果好。

基本的构思就是通过repeating-linear-gradient横向竖向重复的小点点，然后再将文字用相同的方法background-clip，真的是想的时候挺复杂，做出来一点不简单，要是再让我写，还真不好说就能写出来，过往很多的点子，奇思妙想，都是当时能写出来，再写就写不出来了，所以，赶紧记录下来，以后需要的时候，拿来就用，太烧脑子了😂
CSS部份

@font-face {
font-family: aliphb;
src: url(aliphb.woff);
}
:root {
--led-font-color: #f20;
/* 设置LED滚动文字颜色 */
--px-size: 2px;
/* 设置LED屏点的大小 */
--text-count: 10;
/* 设置LED滚动文字数量 */
--led-height: 240px;
/* 设置LED屏的高度，要大于文字高度 */
--led-font-size: 180px;
/* 设置LED文字大小，要小于LED屏高度 */
}
.led {
position: relative;
display: flex;
align-items: center;
height: var(--led-height);
border: solid #272727;
border-width: 2px 4px 4px 2px;
background: 
repeating-linear-gradient(to top, transparent 0, transparent var(--px-size), #000 var(--px-size), #000 calc(var(--px-size) * 2)), 
repeating-linear-gradient(to right, transparent, transparent var(--px-size), #333 var(--px-size), #333 calc(var(--px-size) * 2)), #000;
color: transparent;
margin-top: 30px;
overflow: hidden;
box-shadow: 0 0 0 6px #000;
}
.led div {
position: absolute;
left: 100%;
display: block;
white-space: nowrap;
line-height: 1;
font-size: var(--led-font-size);
background: 
repeating-linear-gradient(to top, transparent 0, transparent var(--px-size), #000 var(--px-size), #000 calc(var(--px-size) * 2)), 
repeating-linear-gradient(to right, #000, #000 var(--px-size), var(--led-font-color) var(--px-size), var(--led-font-color) calc(var(--px-size) * 2));
background-clip: text;
-webkit-background-clip: text;
color: transparent;
animation: led_scroll calc(var(--text-count) * 1s) linear infinite;
font-family: aliphb;
}
@keyframes led_scroll {
0 {
left: 0;
}
100% {
left: calc(var(--led-font-size) * var(--text-count) * -1);
}
}

HTML部份(确实不太实用😒)

<div class="led">
<div>不实用的LED滚动屏</div>
</div>

点击查看LED滚动屏DEMO