Question

好的，所以我在这里：

html：

<div class="object">
        <img src="https://www.direktorenhaus.com/wp-content/uploads/2018/03/Kabali-After-Puja-6-1-800x533.jpg" alt="pic">
      </div>

css：

.object {
  animation: MoveLeftRight 10s linear infinite;
  position: absolute;
  top: 0;
  right: 0;
}

@keyframes MoveLeftRight {
  0%, 100% {
    right: 0;
  }
  50% {
    right: 300px;
  }
}

演示：https://jsfiddle.net/kte1ar3p/

但是我不想一直在左右，从右到左移动，而是想通过...，即当它从例如右到左移动时，它将再次从右到左出来。我不知道这在我解释时是否有意义... 就像将一张大图片移动到一个小框中。

编辑：

到目前为止，我已经做到了这一点，应该多做一些尝试。谢谢。 https://jsfiddle.net/rgsnwb79/

Answer 1

更改CSS

.object{
  position: relative;
  width: 300px;
  height: 280px;
  overflow: hidden;
}
.object img {
  animation: MoveLeftRight 10s linear infinite;
  position: absolute;
  top: 0;
  right: 0;
}

@keyframes MoveLeftRight {
  0%, 100% {
    right: 0;
  }
  50% {
    right: -50%;
  }
}

https://jsfiddle.net/kte1ar3p/2/

Answer 2

考虑到您要重复显示图像及其运动...如果对其进行动画处理，就像将图像滑离自身一样（像一副纸牌），该怎么办？

HTML

<div class="object">
   <img class="slide" src="https://images.freecreatives.com/wp-content/uploads/2016/04/Abstract-Patterns-For-Free.jpg" alt="pic">
</div>

CSS

body {
  margin: 0;
}

.object {
   background-image: url("https://images.freecreatives.com/wp-content/uploads/2016/04/Abstract-Patterns-For-Free.jpg");
   width: 100vw;
   height: 100vh;
}

.slide {
   animation: MoveLeftRight 3s linear infinite;
   position: absolute;
   top: 0;
   left: 0;
}

@keyframes MoveLeftRight {
   0% { left: 0; }
   50% { left: 50%; }
   100% { left: 100%; }
}

https://jsfiddle.net/mittenmoon72/kte1ar3p/27/

如果您想要一个轮播，我将只使用那里的许多JavaScript轮播库之一。

如何使图像在帧中无限移动？

2 个答案: