CSS写的LED滚动屏

CSS 2023-06-19 阅读:4875

前段时间用的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

  1. Limory - 2023-06-21

    存在即合理,对于需要的人就会觉得很实用。并不是人人手机都是MIUI都有那样的插件。
    不用安装app,打开个网页就可在手机上使用滚动屏效果,多么美妙!
    接机人员、粉丝、大学生求爱、特定场合都会用到。
    头脑风暴一下,用js prompt或表单接收自定义参数,高度自定义化,可led滚、可跑马灯、可闪烁,手机打开,横屏检测,隐藏工具栏,全屏显示,这不活脱脱的行走的led活灯箱?

    1. 阿博茨德•厄佛格 (作者)  @Limory - 2023-06-21

      哈哈,对啊,我也觉得会有一天很流行,今天看到五彩斑斓的LED屏,正准备继续升级😁

4876