如何使用 CSS 创建滑动背景效果？

滑动背景效果与幻灯片或轮播不同。幻灯片或轮播由可根据用户意愿停止的分割幻灯片组成。滑动背景获取图像并在循环中无限地在 x 轴上滑动，以创建永无止境且连续移动的背景效果。

方法：在HTML布局中，滑动背景需要两个元素来实现。一个完全适合视口，另一个穿过它并溢出它。简单来说，一个用于背景，另一个用作背景的包含包装器。

在下一步中，两个元素被赋予相关位置。默认情况下，包装器将是浏览器宽度的 100%，并且应用了一个溢出属性，该属性将隐藏包装器外部视觉上包含的任何内容。包装器将允许用户只看到其中包含的部分。它设置的宽度肯定会溢出几乎每个视口，这意味着它将溢出包装器。

.wrapper {
  overflow: hidden;
}
.sliding-background {
  height: 960px;
  width: 6000px;
}

在下一步中，需要创建具有任意高度和宽度的背景图像。宽度为三倍，以适应一分钟更长的循环。画布将在无限循环中在一分钟内移动 3 次。大多数推荐的用于创建图像的软件是 Adobe Photoshop。创建图像后，将其添加到滑动背景CSS 中，如下所示。

.sliding-background {
  background: url("path to the image") repeat-x;
  height: 500px;
  width: 5076px;
}

下一步包括添加滑动效果。背景图像预计会在循环中从左向右移动，重复并创建图像无限移动的无缝效果。变换用于在动画开始时将左侧图像定位在包装器的左侧。到动画完成时，它会将位置负向（从左到右）转换为与我们图像的确切宽度相匹配的量。这就是为什么滑动背景是实际图像宽度的三倍，图像在再次循环之前在 0% 和 100% 之间重复了 3 次。

@keyframes .slide {
  0%{
    transform: translate3d(0, 0, 0);
  }
  100%{
    transform: translate3d(-1692px, 0, 0);
  }
}

动画属性将指示滑动背景类使用幻灯片动画在线性无限循环中一次运行一分钟。

.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 560px;
  width: 5076px;
  animation: slide 60s linear infinite;
}

完整代码：

输出：