条纹动起来必须配合 background-position 动画，否则只是静态渐变；需显式声明 background-repeat: repeat，background-size 与动画位移值严格相等，单位统一，并用 linear 时序保证匀速滚动。
直接用 repeating-linear-gradient 做“动态”条纹背景，本质是静态渐变 + 动画位移，不是真动态生成；想让条纹动起来，必须配合 background-position 动画，否则只是静止条纹。
为什么条纹不动？漏了 background-position 动画
很多人写了 repeating-linear-gradient 就以为完事，结果条纹纹丝不动——因为浏览器默认不移动背景图。要动，得靠 background-position 持续偏移，再用 animation 驱动它。
- 必须显式声明
background-repeat: repeat，否则动画只在单个单元内跑，看不出滚动感 -
background-size决定条纹密度，background-position决定起始偏移，两者单位要一致（都用px或都用%） - 动画时长建议 ≥ 2s，太快会闪，太慢像卡顿；
animation-timing-function: linear最稳，避免 easing 导致速度不均
水平滚动条纹：to right + background-position x
横向条纹滚动最常用，方向用 to right（比 90deg 兼容性更好），动画只动 X 轴：
background: repeating-linear-gradient(
to right,
#3498db 0,
#3498db 4px,
#ecf0f1 4px,
#ecf0f1 8px
);
background-size: 8px 8px;
background-position: 0 0;
animation: stripe-x 3s linear infinite;
@keyframes stripe-x {
0% { background-position: 0 0; }
100% { background-position: 8px 0; }
}
注意：100% 帧的 background-position 必须等于 background-size 的第一个值（这里是 8px），否则循环跳变。
垂直滚动条纹：to bottom + background-position y
垂直滚动只需改 Y 轴，但要注意容器高度是否足够——如果 height 太小或为 0，根本看不到滚动效果：
- 先加
min-height: 20px排查容器塌陷 - 动画终点设为
0 8px（对应background-size: 8px 8px的第二个值） - Safari 对
to bottom支持稳定，比0deg更推荐
斜向滚动条纹：别硬写 45deg，用 transform 旋转更稳
直接写 45deg 容易在高 DPR 屏上出现锯齿、周期错乱，且 background-position 计算复杂（需按 √2 换算）。更可靠的做法：
- 先用
to right写出清晰横条纹 - 给容器加
transform: rotate(45deg) - 同时加
overflow: hidden防边缘溢出，transform-origin: center控制旋转中心
这样动画仍走 X 轴，逻辑简单，渲染也干净。
真正容易被忽略的点是：条纹动效依赖像素对齐，background-size 和动画位移值必须严格相等；差 0.1px 都可能在 Safari 或旧版 Chrome 里导致跳帧或停顿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
