用 linear-gradient 配合 background-position 动画可实现高兼容低开销扫描线：单色渐变（如 rgba(0,0,0,0) 49%, #0af 50%, rgba(0,0,0,0) 51%）+ 固定宽高容器 + overflow: hidden + background-size 与 animation-duration 匹配位移，支持 vh 响应式及 will-change 优化。
直接用 linear-gradient 配合 @keyframes 位移动画就能做出高兼容、低开销的扫描线，不需要 SVG 或 JS。
扫描线本质是「单色渐变 + 容器裁剪 + 持续位移」
所谓扫描线，视觉上是一条亮带从上往下（或左往右）匀速划过元素。它不是真在“扫描”，而是靠一个高度仅几像素的线性渐变背景，在固定尺寸容器里不断向下平移，配合 overflow: hidden 裁剪掉超出部分，形成“扫过”的错觉。
- 渐变必须是单方向、强对比：比如
linear-gradient(to bottom, transparent 49%, #fff 50%, transparent 51%)，中间 2% 是亮线，上下全透明 - 容器需设明确宽高和
overflow: hidden，否则动画会溢出可见区域 - 动画只需移动
background-position，不要用transform: translateY()——后者会触发重绘，且对 background-size/position 的控制更弱
关键 CSS 写法：background-size 与 animation-duration 要匹配
扫描速度感由 background-size 和 animation-duration 共同决定。如果渐变高度是 100px，但动画只动了 50px，就会卡顿或跳帧。
- 设渐变重复单元为
background-size: 100% 100px（即每 100px 高出现一次亮线） - 动画需让背景图完整滚动一个单元：用
background-position: 0 0→0 100px，时长定为1s，就是 100px/s 的扫描速度 - 若想更慢，改
animation-duration: 2s；若想更密（细线），把100px换成20px，同时调短 duration 避免太慢
div.scan-line {
height: 200px;
background: linear-gradient(to bottom, transparent 49%, #0af 50%, transparent 51%);
background-size: 100% 20px;
animation: scan 1.5s linear infinite;
overflow: hidden;
}
@keyframes scan {
0% { background-position: 0 0; }
100% { background-position: 0 20px; }
}
常见翻车点：透明通道没处理好，导致边缘发灰或闪烁
用 transparent 不等于“完全无色”，尤其在非 sRGB 显示器或开启色彩管理的浏览器里，transparent 可能被解析为 rgba(0,0,0,0)，和父层混合后出现灰边。更稳的方式是显式指定透明色值。
立即学习“前端免费学习笔记（深入）”；
- 避免写
transparent 49%, #0af 50%，改用rgba(0,0,0,0) 49%, #0af 50%, rgba(0,0,0,0) 51% - 如果底色是深色，亮线建议用带 alpha 的浅色，比如
rgba(255,255,255,0.7)，比纯白更柔和、抗锯齿更好 - 加
will-change: background-position可提示浏览器提前升层，减少 iOS Safari 上的闪烁
响应式扫描线：用视口单位动态调整扫描密度
固定像素的扫描线在大屏上显得稀疏，小屏上又太密。用 vh 或 vw 替代 px，能让扫描节奏随屏幕自适应。
- 把
background-size: 100% 20px改成background-size: 100% 3vh，亮线高度占视口高的 3% - 动画终点同步改为
0 3vh，duration 保持 1–2s 即可，人眼对“速度感”的判断依赖相对比例，不是绝对像素 - 慎用
vmin：在窄屏手机上可能让亮线过粗，压垮内容；优先试vh，再按需 media query 微调
真正难的不是写出第一版扫描线，而是让亮线在各种缩放、DPR、深色模式下都稳定不发虚——这取决于你选的色值是否带 alpha、渐变 stop 是否严格对齐、以及有没有漏掉 background-repeat: repeat（默认就是 repeat，但显式写上更安心）。
