图片从左至右持续滚动展示

首先，我们先确定HTML结构

            <div className="wrapper">
              <div class="tech-slideshow">
                <div class="mover-1">
                  <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774199移动-首页999_03.jpg" />
                  <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774198移动-首页2_03.jpg" />
                </div>
                <div class="mover-2">
                  <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774199移动-首页999_03.jpg" />
                  <img src="//cdn.cdomdmyxy.com/images/8899/32/1578554774198移动-首页2_03.jpg" />
                </div>
              </div>
            </div>

然后，我们还需要确定CSS

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

.tech-slideshow > .mover-1 {
  height: 2rem;
  width: 1388px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}
.tech-slideshow > .mover-2 {
  height: 2rem;
  width: 1388px;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  transform: translate3d(0, 0, 0);
}

.tech-slideshow .mover-1 {
  animation: moveSlideshow 15s 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 {
  100% {
    transform: translateX(-66.6666%);
  }
}

来源：CSDN

作者：前端_刘洪瑞

链接：https://blog.csdn.net/qq_21821091/article/details/103918531