javascript - 尝试制作 CSS3 对 Angular 线滑动动画，但没有按预期工作

Question

所以我试图在 CSS3 中创建对 Angular 线滚动，但我没有运气。 原脚本是这样的:https://codepen.io/275845/pen/LoYBjg

  <style>
    .tech-slideshow {
      height: 600px;
      max-width: 800px;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      transform: translate3d(0, 0, 0);
    }

    .tech-slideshow > div {
      height: 100px;
      width: 2526px;
      background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      transform: translate3d(0, 0, 0);
    }
    .tech-slideshow .mover-1 {
      animation: moveSlideshow 12s linear infinite;
    }
    .tech-slideshow .mover-2 {
      opacity: 0;
      transition: opacity 0.5s ease-out;
      background-position: 0 -200px;
      animation: moveSlideshow 15s linear infinite;
    }


    @keyframes moveSlideshow {
      100% { 
        transform: translateX(-66.6666%);  
      }
    }
    </style>
<div class="tech-slideshow">
      <div class="mover-1"></div>
      <div class="mover-2"></div>
    </div>

这是我到目前为止尝试过的方法，但没有成功:https://codepen.io/275845/pen/gJOjXY

<style>
.tech-slideshow {
  height: 600px;
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow > div {
  height: 100px;
  width: 2526px;
  background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow .mover-1 {
  animation: moveSlideshow 2s linear infinite;
}
.tech-slideshow .mover-2 {
  opacity: 0;
  transition: opacity 0.5s ease-out;
  background-position: 0 -200px;
  animation: moveSlideshow 5s linear infinite;
}
@keyframes moveSlideshow {
   0% {
        transform: translatex(0px) translatey(0px)
    }
    100% {
        transform: translatex(100px) translatey(100px);
    }
}
</style>

这是我试图实现的结果:https://streamable.com/ltsba

如您所见，我正在尝试在 css3 中制作对 Angular 线幻灯片滚动，但是当然，如​​果有人能给我指出另一个解决方案，它是 vanilla javascript，甚至是 jQuery，我愿意接受新的建议。

Answer 1

你很接近，只是几个问题。

1. 你不需要2个“插入者”，一个就够了。
2. 让它变大!和背景重复!
3. 然后移动该背景图像的大小。

.tech-slideshow > div {
  height: 3000px;  // BIG
  width: 3000px;
  background: url(https://i2.wp.com/mitmark.com.br/wp-content/uploads/2016/04/circle.png?ssl=1);
  position: absolute;
  bottom: 0;. // position
  right: 0;
  animation: moveSlideshow 5s linear infinite;
}

@keyframes moveSlideshow {
    0% {
        transform: translatex(0px) translatey(0px);
    }
    100% {
        transform: translatex(255px) translatey(255px);  // move size of image
    }
}