MOTION HUB

扫描线

Scanline
#scanline · 48/72
AUTO · 自动演示

参数调改

PLAYGROUND
扫描线间距--line_gap
28
px
扫描线强度--line_opacity
0.080.4
亮带周期--band_s
2.514
s
亮带色--band_color
底色--base

实现要点

NOTES
  1. 01

    扫描线用 repeating-linear-gradient(0deg, 深 1px, 透明 gap) 一层搞定,行距 --line_gap 以 px 对齐像素网格;强度统一由 layer opacity 控制,避免每条线各写 alpha。

  2. 02

    移动亮带是独立的 22% 高渐变条 translateY 扫过全屏(transform-only),linear 匀速才有 CRT 刷新的机械感;band 颜色低透明度冷白,扫过时只提亮不糊字。

  3. 03

    整体闪烁(opacity 0.85↔1、steps 跳变)模拟荧光抖动,幅度务必收敛(±15% 以内),否则长时间观看眩晕。

  4. 04

    常显辉光层打底:关掉扫描线与亮带,画面仍是完整的深色氛围底;要压在真实内容上时把 .crt 叠在内容之上并 pointer-events:none。

  5. 05

    reduced-motion 下停用亮带移动与闪烁,保留静态扫描线纹理。

源代码

SOURCE

加载源代码…