repeating-linear-gradient做条纹的本质是用固定色块周期性平铺形成静态视觉条纹，再通过background-position移动整个背景画布产生滚动感，条纹本身并不运动。
repeating-linear-gradient 做条纹的本质是什么
它不是“动画条纹”，而是用固定色块周期性平铺出视觉条纹，再靠 background-position 移动整个背景图层，产生滚动感。关键在于：条纹本身不移动，是背景画布在动。
- 条纹宽度由渐变的色标位置决定，比如
repeating-linear-gradient(90deg, #007bff, #007bff 10px, transparent 10px, transparent 20px)就生成 10px 实色 + 10px 透明的竖条纹 - 动画必须作用于
background-position，不能用transform或left等位移元素本身，否则会破坏条纹连续性 - 方向角（如
90deg）决定条纹朝向；0deg是从下往上铺，90deg是从左往右铺，别反了
让条纹滚动起来的最小可行动画写法
只改 background-position 的 x 或 y 值，配合 background-size 控制循环单位，就能形成无缝滚动。
.loading-bar {
height: 8px;
background: repeating-linear-gradient(
90deg,
#007bff,
#007bff 10px,
transparent 10px,
transparent 20px
);
background-size: 20px 100%; /* 必须匹配渐变周期，否则跳帧 */
animation: stripe-move 2s linear infinite;
}
<p>@keyframes stripe-move {
0% { background-position: 0 0; }
100% { background-position: 20px 0; } /<em> 移动一个完整周期 </em>/
}</p>
-
background-size必须等于渐变中一个完整重复单元的宽度（这里是 20px），否则条纹衔接处会撕裂 - 动画终点值推荐设为
background-size的整数倍，20px最稳；设成100%在某些浏览器里有渲染抖动 - 不要用
%单位写background-position动画，小数精度问题会导致条纹“卡顿”
适配不同加载状态：从 0% 到 100% 的宽度控制
repeating-linear-gradient 本身不感知进度，它只是装饰层。真实进度靠容器宽度控制，条纹层需和进度层叠加。
- 推荐结构：外层
div设固定高度和 overflow hidden，内层两个div叠放——底层纯色（代表已完成），上层带条纹（代表加载中） - 上层条纹
div的width动态绑定进度值，同时保持background-position持续动画 - 别给条纹层加
transition: width，它和animation同时作用时容易打架；宽度变化应瞬时生效，动画只负责条纹滚动
移动端和 Safari 的兼容性雷区
iOS Safari 对 repeating-linear-gradient 的解析更严格，稍不注意就回退成单色。
- 避免在渐变中混用单位，比如
#007bff 1em和transparent 16px一起用，全统一用px -
background-size不能写auto或100%，必须是明确数值，且与渐变周期完全一致 - Safari 旧版本（iOS 14.5 之前）不支持
repeating-linear-gradient的 angle 写法带空格，写成90deg没问题，但别写成90 deg - 如果条纹突然消失，先检查开发者工具里 background 属性是否被浏览器静默降级为 solid color，再看控制台有没有 CSS 解析警告
条纹滚动看着简单，真正稳跑的关键不在动画多炫，而在渐变周期、background-size、background-position 这三者的数值咬合——差 1px，滚动就断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
