Question

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

理想情况下，如果可能，我希望它是纯HTML和CSS。

此刻它向左移动但是在结尾处有一个间隙而且它跳了，我哪里出错？

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

如果你愿意在＆＃34;幻灯片放映＆＃34;中使用两个div。你可以这样做：

＆＃13;

.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; }
}

＆＃13;

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

＆＃13;

这会将div移动到左边，直到完全旋转并且第二张图片是＃34;在同一地点＆＃34;第一张幻灯片现在可以再次显示。第二个div上的填充是使它在第一个div之后对齐。您可以改变它以使用其他东西等。

这里也是一个小提琴：https://jsfiddle.net/thepio/7Ljz82n9/4/

修改

我心里想，为什么使用伪元素是不可能的。它是！以下是仅使用一个div pseudo-element ::after的示例。我想你可以弄清楚宽度，边距和填充等（1 x图像宽度或2 x图像宽度）。

＆＃13;
＆＃13;
.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; } }
＆＃13;
<div class="tech-slideshow"> <div class="wrapper"> <div class="first"></div> </div> </div>
＆＃13;
＆＃13;
＆＃13;

还有一个小提琴：https://jsfiddle.net/thepio/05w6ceue/1/

背景图像在全宽容器

1 个答案: