用 repeating-linear-gradient + background-position 动画可实现高兼容低开销科技感网格扫描线：两组正交渐变构成网格，vmin 单位适配缩放，background-size: 200% 200% 配合 background-position 动画实现无缝循环扫描，加 ::after 斜向光效层增强穿透感，注意透明色用 rgba(0,0,0,0) 避免 Safari 渲染失真。
直接用 repeating-linear-gradient + background-position 动画就能做出高兼容、低开销的科技感网格扫描线，不需要 JS 或 SVG。关键不是“画多少线”，而是让渐变背景持续位移时保持节奏稳定、边缘锐利、层级干净。
用 repeating-linear-gradient 构建基础网格线
网格线本质是两组正交方向的等距条纹叠加：水平线靠 to bottom 渐变，垂直线靠 to right 渐变。必须用 repeating- 前缀，否则只能生成单条线。
-
transparent 0, transparent 5vmin定义透明间隔区，避免线与线之间糊在一起 -
var(--grid-color) 5vmin, var(--grid-color) 6vmin是实际线条——宽度仅1vmin，足够细且高对比 - 别用
px单位，vmin能随视口缩放，适配大屏/4K 更稳 - 两组渐变用逗号分隔，写在同一个
background声明里，浏览器会自动合成
用 background-position 实现平滑扫描位移
扫描感来自背景图的持续偏移，不是元素移动。用 transform: translate() 或 top/left 会触发重排，且无法和渐变尺寸对齐。
- 动画只需控制
background-position从0 0→100% 100%，时长和background-size匹配 -
background-size: 200% 200%是关键：它让位移 100% 时，网格刚好滚动一个完整周期，不跳帧 - 动画函数建议用
cubic-bezier(0.25, 0.46, 0.45, 0.94)，比linear更有设备启动惯性 - 加
will-change: background-position可提前提示浏览器启用合成层，尤其在 Safari 上防卡顿
加一层动态光效层增强扫描“穿透感”
纯网格线容易显得平面化。加一层带角度的半透明渐变覆盖层，能模拟扫描光掠过网格时的瞬时高亮反馈。
- 用
::after伪元素实现，避免额外 DOM 节点 -
linear-gradient(45deg, rgba(0,255,136,0) 0%, rgba(0,255,136,0.3) 50%, rgba(0,255,136,0) 100%)提供斜向光带，不破坏网格结构 - 动画只动
transform: translateX(-200%)，配合infinite和足够长的 duration（如30s），营造缓慢扫掠感 - 必须设
pointer-events: none，否则会拦截下层交互
常见翻车点：透明通道与 Safari 渲染失真
很多“扫描不动”或“边缘发灰”的问题，根源不在动画逻辑，而在颜色模型和浏览器解析差异。
- 别依赖
transparent——它在非 sRGB 显示器上可能被转为rgba(0,0,0,0)，和深色背景混合后出现灰边；显式写rgba(0,0,0,0)更可控 - Safari 对
repeating-linear-gradient的background-size缩放支持较弱，若发现网格错位，把200%改成200vw 200vh并确保容器position: relative - 如果扫描线在高 DPR 屏幕（如 MacBook Pro）上模糊，检查是否意外启用了
image-rendering: pixelated或未设backface-visibility: hidden
真正难调的是三者节奏同步：网格密度、位移速度、光效流动。它们各自独立，但视觉上必须像一台精密仪器里的耦合齿轮——差 0.1s 就露馅。动手前先定好基准单位（比如用 1vmin 线宽配 40s 总动画时长），再微调，别一上来就堆参数。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
