如何使用linear-gradient创建无缝无限滑动的背景加载动画？

我来帮你完美解决这个纯CSS斜条纹滑动加载的问题！你的三个核心诉求都可以通过理解渐变的周期规律和CSS动画的细节来实现，完全不需要JavaScript。下面逐个拆解问题并给出完整的可复用解决方案：

核心问题拆解与解决 #

1. 实现平滑连续的无限滑动动画 #

要营造无限滑动的视觉错觉，关键是让背景图案的起始状态和动画结束状态完全一致。我们可以通过以下两步实现：

• 用background-size明确定义渐变图案的重复单元尺寸，确保图案的重复性可控。
• 让动画的background-position移动距离等于这个重复单元的宽度，这样动画结束时，背景位置刚好回到和起始位置完全匹配的图案状态，视觉上就像无限滚动。

2. 计算元素宽度保证图案连续 #

斜条纹的重复单元在水平方向上的尺寸需要通过数学计算得出：对于-45度的渐变，单个条纹周期（透明+实色的总宽度）的水平等效长度是周期长度 × √2（√2≈1.4142）。我们可以用CSS变量来封装这些计算，避免手动试错：

• 定义基础条纹宽度--stripe-width，自动计算周期--stripe-cycle（条纹宽度×2）。
• 计算渐变周期--gradient-period（周期×1.4142），元素宽度设为这个值的整数倍，就能保证图案在元素内完整重复，没有断裂。

3. 动画循环无卡顿（无Glitch） #

避免动画重启时的卡顿，核心是让动画的终点和起点的背景图案完全对齐。不要用100%作为动画终点，而是用渐变周期的具体数值：当动画从0 0移动到var(--gradient-period) 0时，结束位置的图案和起始位置完全一致，循环时不会出现任何跳转或断层。

完整可复用代码 #

/* 可复用的加载条纹类 */
.loading-stripes {
  /* 可自定义的变量：修改这里即可调整条纹样式 */
  --stripe-width: 10px;       /* 单个条纹的粗细 */
  --stripe-color: black;      /* 条纹颜色 */
  --bg-color: blue;           /* 背景底色 */
  --animation-duration: 1s;   /* 滑动动画时长 */
  
  /* 自动计算的变量，无需手动修改 */
  --stripe-cycle: calc(var(--stripe-width) * 2); /* 单个条纹周期（透明+实色） */
  --gradient-period: calc(var(--stripe-cycle) * 1.4142); /* 45度渐变的水平周期 */
  
  /* 元素尺寸：宽度设为渐变周期的整数倍，保证图案完整 */
  width: calc(var(--gradient-period) * 8);
  height: 200px;
  display: inline-block;
  
  /* 背景样式 */
  background-color: var(--bg-color);
  background-image: repeating-linear-gradient(
    -45deg,
    transparent,
    transparent var(--stripe-width),
    var(--stripe-color) var(--stripe-width),
    var(--stripe-color) var(--stripe-cycle)
  );
  background-size: var(--gradient-period) var(--gradient-period);
  
  /* 滑动动画 */
  animation: loading-slide var(--animation-duration) linear infinite;
}

@keyframes loading-slide {
  from {
    background-position: 0 0;
  }
  to {
    /* 移动距离等于渐变周期，确保终点与起点图案完全对齐 */
    background-position: var(--gradient-period) 0;
  }
}

<ul>
  <li class="loading-stripes">test</li>
  <li class="loading-stripes">test</li>
</ul>

额外优化建议 #

• 如果不需要固定宽度，可以去掉width的固定值，让元素自适应父容器宽度。此时边缘的条纹可能不完整，但作为加载占位块，这种效果通常也是可接受的，滑动动画依然保持连续。
• 通过修改CSS变量--stripe-width、--stripe-color等，可以快速调整条纹的粗细、颜色和动画速度，完全适配不同的设计需求。

内容的提问来源于stack exchange，提问作者Kamafeather