时间戳

首页 > 解决方案 > 尝试制作 CSS3 对角线幻灯片动画，但没有按预期工作

javascript - 尝试制作 CSS3 对角线幻灯片动画，但没有按预期工作

问题描述

所以我试图在 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，我愿意接受新的建议。

标签： javascriptjquerycsssvg

解决方案

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

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

推荐阅读