无限滚动背景图片

这里的想法是创造出幻灯片效果，但不用轮播。换句话说，我们正在制作一系列从左到右滑动的图片，并在到达图片末尾时重复。

技巧在于我们使用单个背景图片，并通过 CSS 动画将其在屏幕上移动，并在完成时重复。这使得我们看起来像是在使用图片库，实际上我们只用了一张图片。

设置 HTML

以下是我们 HTML 结构的蓝图

我们使用两个元素：一个是叫做 .container 的元素，它正好匹配视窗的宽度；另一个叫做 .sliding-background 的元素，它位于 .container 后面，并且超出它。本质上，我们使用 .container 作为遮罩，隐藏 .sliding-background 在屏幕上滚动时超出部分的宽度。

这意味着我们只需要在 HTML 标记中创建两个元素

<div class="container">
  <div class="sliding-background"></div>
</div>

定位元素

让我们添加一些 CSS，正确地定位我们的两个元素。

.container {
  overflow: hidden;
}

.sliding-background {
  height: 500px;
  width: 5076px;
}

我们的 .container 使用 overflow 属性来隐藏在它之外的所有内容。把它想象成照片上的裁剪。容器外面可能还有额外的内容，但容器阻止我们看到它。

这就是我们的 .sliding-background 发挥作用的地方。它被设置为一个非常大的宽度，会超出大多数视窗。这就是诀窍：它应该超出容器。在这种情况下，我们使用一个大约为 5076px 的宽度，它应该会超出大多数浏览器视窗。

创建背景图片

如果我们要创造幻灯片库的效果，我们就需要一张图片，对吧？这是我们下一步要做的事。

还记得我们之前提到的 5076px 的滑动背景宽度是“大约”吗？好吧，它是大约的，但也是有意的，因为它可以被 3 整除，正好符合一分钟循环的时间，我们稍后会提到。这意味着我们的背景图片画布是 5076 / 3 也就是 1692px。最终，我们的背景图片在一分钟内会循环三次，并无限循环。数学万岁！

500px 的高度是真正的任意值。它可以是任何你想要的，只要它也是实际的背景图片文件的大小。

本章开头演示中使用的 Photoshop 文件可以用来创建背景图片，你可以 下载，如果你想要一个起点。

图片保存（并优化！）后，我们将在 CSS 中使用它作为背景图片

.sliding-background {
  background: url("..path/to/image") repeat-x;
  height: 500px;
  width: 5076px; /* The image width times 3 */
}

太棒了！这给了我们一张巨大的图片，它超出了容器，现在可以无限地滚动 across the screen.

为背景图片添加动画

好了，让我们让它动起来。我们希望它从左到右循环滚动，不断重复，创造出一种无缝的效果，让图片看起来像是无限延伸的。

首先，让我们定义 CSS 动画

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1692px, 0, 0); /* The image width */
  }
}

我们使用 transform 属性将左边的图片在动画开始时定位到容器的左边缘，就像这样

当动画完成时，它将把位置向负方向（从左到右）转换一个与我们图片宽度完全匹配的距离。并且，由于 .sliding-background 是实际图片的三倍宽，因此图片在 0% 到 100% 之间会重复三次，然后再次循环。

我们完全使用额外的 <div>，而不是在主元素上动画 background-position，这样我们就可以使用动画 transform 来进行移动，这 效率更高。

好了，让我们在 .sliding-background 类上调用 slide 动画，来完善整个过程

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

animation 属性指示 .sliding-background 使用 slide 动画，并且每次以线性方式无限循环运行一分钟。

整合所有内容

<div class="container">
  <div class="sliding-background"></div>
</div>

.container {
  overflow: hidden;
}

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

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