HUD扫描线动画的核心视觉逻辑是模拟CRT光束自上而下匀速扫描，呈现顶底透明、中间高亮带色偏及边缘柔化的条状效果；CSS变量集中控制亮度、颜色、速度与高度以保障可维护性。
什么是HUD扫描线动画的核心视觉逻辑
HUD扫描线动画本质是模拟老式CRT显示器或军事界面中，光束从上到下匀速扫过屏幕并留下高亮条的效果。它不是简单的渐变移动，而是需要：顶部透明 → 中间强亮（带轻微色偏）→ 底部透明，且边缘有柔和衰减。CSS变量在这里的作用不是替代动画，而是集中控制扫描线的亮度、颜色、速度和高度，避免硬编码导致后期调整困难。
--scan-height 和 --scan-speed 如何影响动画表现
这两个变量直接决定扫描线是否“像真的”。--scan-height 通常设为 4px 到 8px（太粗失真，太细则不可见）；--scan-speed 推荐用 s 单位而非 %，例如 3s 扫完一屏比 100% 更可控。若用 animation: scan 2s linear infinite 却没设 background-size 配合，扫描线会卡顿或跳变。
-
background-image: linear-gradient(to bottom, transparent, rgba(0,220,255,0.7), transparent)—— 色值必须带 alpha，纯rgb()无法实现边缘柔化 -
background-size: 100% var(--scan-height)—— 必须用var()绑定，否则修改变量不生效 -
animation-duration: var(--scan-speed)—— 若写死2s，后续想调速就得改两处
为什么 mask 比 clip-path 更适合做扫描线遮罩
clip-path 对动画帧率敏感，尤其在 Safari 上容易出现闪烁或撕裂；mask 基于 alpha 通道，能平滑过渡，且支持 mask-composite: add 叠加多层效果。关键点在于 mask 图像必须用 linear-gradient 构造，并用同一组 CSS 变量驱动尺寸和位置。
- 定义 mask：
mask: linear-gradient(to bottom, transparent 0%, black var(--scan-offset, 0%), black calc(var(--scan-offset, 0%) + var(--scan-height, 6px)), transparent calc(var(--scan-offset, 0%) + var(--scan-height, 6px) + 1px)) - 动画只驱动
--scan-offset：用@keyframes从0到100vh，再配合animation-timing-function: linear - 注意：Firefox 对
mask的vh单位支持不稳定，建议 fallback 到100%或固定像素值
如何让扫描线响应深色/浅色模式并保持对比度
纯白扫描线在深色背景上刺眼，纯蓝在浅色背景上消失。不能靠 JS 监听 prefers-color-scheme，而应利用 CSS 变量级联和 color-scheme 媒体查询提前注入适配值。
立即学习“前端免费学习笔记（深入）”；
- 根元素设默认：
:root { --scan-color: hsl(192, 95%, 55%); } - 深色模式覆盖：
@media (prefers-color-scheme: dark) { :root { --scan-color: hsl(192, 100%, 65%); } } - 浅色模式更收敛：
@media (prefers-color-scheme: light) { :root { --scan-color: hsl(192, 80%, 45%); } } - gradient 中直接引用：
linear-gradient(to bottom, transparent, hsl(from var(--scan-color), h s l), transparent)—— 注意hsl(from ...)语法需现代浏览器支持，旧版请拆成三个独立变量
真正难调的不是动效本身，而是扫描线在不同分辨率、缩放比、DPR 下的像素对齐。比如 --scan-height: 5.3px 在 1.5x 屏幕上可能渲染成模糊条纹，建议始终用整数像素值，并用 will-change: transform 提前提示合成层。
