Question

所以我试图在CSS3中创建对角滚动，但是我没有运气。原始脚本是这样的：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中滚动，但是，当然，如果有人能指出我的另一种解决方案，那就是普通的javascript，甚至是jQuery，我都欢迎您提出新的建议。

Answer 1

您非常接近，只有几个问题。

您不需要2个“移动器”，一个就足够了。
变大！然后重复背景！
然后您移动该背景图像的大小。

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

尝试制作CSS3对角幻灯片动画，但效果不理想

1 个答案: