repeating-linear-gradient 是实现斑马线加载条的核心，通过单层背景的位移动画模拟流动条纹；正确写法需色块首尾相接、角度选45deg/135deg、background-size与position联动动画，并注意高DPR屏下用px单位。
repeating-linear-gradient 是实现斑马线加载条的核心，不是靠多层元素堆叠，而是用单个 background 层通过位移动画模拟“移动条纹”。
为什么不用 background-image + multiple backgrounds？
虽然可以叠加两层渐变（一层静态灰底 + 一层彩色条纹），但维护成本高、动画难同步。真正轻量的做法是：只用一层 repeating-linear-gradient 作内容层，再用 background-size 和 background-position 配合 animation 推动视觉流动。关键点在于——条纹本身必须可平铺、无间隙、角度合理。常见错误是写成 repeating-linear-gradient(45deg, #f00 0 10px, #00f 0 20px)，这会导致第二段从 0px 开始覆盖第一段，实际没留空隙。
正确写法：明确每个色块的起止位置
必须让相邻色块首尾相接，例如：
background: repeating-linear-gradient( 45deg, #f03355 0px, #f03355 10px, #ffa516 10px, #ffa516 20px );
- 每段颜色占满 10px，不重叠也不留白
- 角度建议选 45deg 或 135deg，太小（如 5deg）在窄容器里看不出条纹感，太大（如 90deg）容易被误认为纯色块
- 如果要兼容老版 Safari，避免用透明度缩写（如
#f008），改用rgba()显式声明
动画控制：background-size 和 background-position 必须联动
仅改 background-position 会滑动但不“拉伸”，仅改 background-size 会撑开条纹但不动。真实加载效果需要两者配合：
立即学习“前端免费学习笔记（深入）”；
.zebra-bar {
background: repeating-linear-gradient(45deg, #f03355 0 10px, #ffa516 0 20px);
background-size: 20px 20px;
animation: zebraMove 1.2s linear infinite;
}
<p>@keyframes zebraMove {
0% {
background-position: 0 0;
background-size: 20px 20px;
}
100% {
background-position: 20px 0;
background-size: 22px 20px; /<em> 微调宽度制造“推进”错觉 </em>/
}
}-
background-size在末帧略增（如 +2px），能强化向前滚动感；固定大小则像匀速带子 - 动画时长别低于 0.8s，否则人眼识别为闪烁而非流动
- 慎用
steps()，它会让条纹跳变，失去“加载中”的连续暗示
适配不同容器高度时的坑
条纹高度由渐变角度和色块长度共同决定。当容器高度变矮（比如只有 6px），45deg 下 10px 宽的色块实际在垂直方向投影约 7px，可能溢出或压扁。此时应：
- 降低色块长度（如从 10px → 6px），保持比例
- 改用更陡的角度（如 65deg），让条纹更“竖直”，减少纵向占用
- 避免在
border-radius大于条纹周期时使用，圆角会裁掉部分条纹，造成边缘不完整
最易被忽略的是：动画在低分辨率屏（尤其是 DPR=2 的 macOS Retina）下可能模糊，建议把色块单位统一用 px，别混用 em 或 rem。
