html - 背景图像在全宽容器内无限向左移动

Question

我想创建一个无限滚动(向左)的图像动画，其中容器是全宽的，背景图像是水平重复的。所以它总是像一个自动收报机样式 - 相同的图像只是无限地向左移动而没有间隙。

理想情况下，如果可能的话，我希望它是纯 html 和 css。

这是我的尝试 - https://jsfiddle.net/7Ljz82n9/

此刻它向左移动，但最后有一个空隙，它跳了起来，我哪里错了？

HTML

<div class="tech-slideshow">
  <div class="mover-1"></div>
</div>

CSS

.tech-slideshow {
  height: 102px;
  width:100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow > div {
  width: 1440px;
  background: url(http://placehold.it/1440x102);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
  background-repeat:repeat-x;
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 12s linear infinite;
}

@keyframes moveSlideshow {
  100% { 
    transform: translateX(-66.6666%);  
  }
}

Answer 1

如果您愿意在“幻灯片放映”中使用两个 div，您可以这样做:

.tech-slideshow {
  height: 102px;
  width: 100%;
  max-width: 1440px; /* Can be at most the width of the image */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.wrapper {
  height: 102px;
  width: 2880px;
}

.wrapper div {
  position: absolute;
  width: 1440px;
  height: 102px;
  background: url('http://placehold.it/1440x102') top right no-repeat;
  margin: 0;
  padding: 0;
  animation: movediv 12s linear infinite;
}

.wrapper div.second {
  padding-left: 1440px;
  animation: movediv 12s linear infinite;
}

@keyframes movediv {
 0% { margin-left: 0px; }
 100% { margin-left: -1440px; }
}

<div class="tech-slideshow">
  <div class="wrapper">
    <div class="first"></div>
    <div class="second"></div>
  </div>
</div>

这会将 div 向左移动，直到进行完整的旋转，并且第二张图片与第一张幻灯片“在同一位置”，现在可以再次显示。第二个 div 上的填充是为了使其在第一个 div 之后对齐。您可以更改它以使用其他东西等。

这里还有一个可以玩的 fiddle :https://jsfiddle.net/thepio/7Ljz82n9/4/

编辑:

我心想为什么使用伪元素不可能做到这一点。它是!下面是一个使用 伪元素 ::after 的例子，只有一个 div。我认为您可以算出宽度、边距和填充等(1 x 图像宽度或 2 x 图像宽度)。

.tech-slideshow {
  height: 102px;
  width: 100%;
  max-width: 1440px; /* Can be at most the width of the image */
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}

.wrapper {
  height: 102px;
  width: 2880px;
}

.wrapper div {
  position: absolute;
  width: 1440px;
  height: 102px;
  background: url('http://placehold.it/1440x102') top right no-repeat;
  margin: 0;
  padding: 0;
  animation: movediv 12s linear infinite;
}

.wrapper div::after {
  display: block;
  content: '';
  width: 1440px;
  height: 102px;
  padding-left: 1440px;
  background: url('http://placehold.it/1440x102') top right no-repeat;
}

@keyframes movediv {
 0% { margin-left: 0px; }
 100% { margin-left: -1440px; }
}

<div class="tech-slideshow">
  <div class="wrapper">
    <div class="first"></div>
  </div>
</div>

还有一个关于它的 fiddle :https://jsfiddle.net/thepio/05w6ceue/1/