用repeating-linear-gradient配合background-position百分比动画可实现无缝斜纹滚动，需锁定background-size与色标周期一致，避免漏写repeating-前缀、误用linear-gradient或非整数角度。
直接用 repeating-linear-gradient + background-position 百分比动画就能实现，但必须避开两个致命坑：一是漏掉 repeating- 前缀导致只画一条带，二是没锁死 background-size 导致斜纹错位或模糊。
斜向条纹必须用 repeating-linear-gradient，不能用 linear-gradient
常见错误是照搬渐变写法：linear-gradient(45deg, #000 0px, #000 8px, transparent 8px, transparent 16px) —— 这只会生成一个 16×16px 的斜纹单元，靠 background-repeat 复制，边缘易撕裂、缩放时糊。真正可控的是 repeating-linear-gradient，它从底层定义周期结构：
- 必须带
repeating-前缀，否则浏览器不理解“自动循环”语义 - 色标位置是累计偏移量，比如
#000 0px, #000 8px, transparent 8px, transparent 16px表示黑条宽 8px、透明条宽 8px，总周期 16px - 斜纹角度建议用
45deg或to bottom right，避免用37deg这类非整数角度，否则像素对齐困难
滚动动画要靠 background-position 百分比 + background-size 锁定
想让斜纹平滑向左滚，不能用 px 单位做位移动画——容器宽度一变，滚动节奏就乱。正确做法是让 background-size 显式声明周期尺寸，再用百分比驱动位移：
-
background-size: 16px 16px（与色标总周期一致），确保每个重复单元物理尺寸固定 -
background-position: 0% 0%初始态，background-position: 100% 100%动画终点 - 动画用
@keyframes定义0% { background-position: 0% 0% }→100% { background-position: 100% 100% } - 这样无论容器多宽，位移距离始终等于一个完整周期的对角线长度，首尾严丝合缝
边缘发虚、锯齿？加 background-size 和透明度微调
斜纹在高 DPI 屏或缩放时容易出现半像素渲染，表现为边缘灰边或抖动：
立即学习“前端免费学习笔记（深入）”；
- 强制加
background-size: 16px 16px（哪怕你用的是45deg），禁用浏览器按容器尺寸自动计算 - 别用
transparent，改用rgba(0,0,0,0.05)或类似低透明度色值，减少亚像素混合误差 - 如果仍糊，把周期尺寸翻倍（如 32px→64px），用更大基础单元降低相对误差
- 不要依赖
background-repeat: round或space，它们会破坏斜纹连续性
最易被忽略的是：斜纹滚动是否「无缝」，不取决于动画时长或 easing，而完全由 background-size 与色标周期的数值一致性决定。写错一个像素，整个循环就断了。
