如何不断交替两张图片

Question

我正在尝试使用 CSS 或 jQuery 在两个图像之间不断切换。我的工作正常，但它本质上是将一个图像放在另一个图像之上，如果我使用的图像是透明的，这会导致问题。

section {
  position: relative;
}

section img {
  position: absolute;
  width: 200px;
}

.top {
  animation-name: fade;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-direction: alternate;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

<section>
  <img class="bottom" src="https://placeimg.com/640/480/nature">
  <img class="top" src="https://placeimg.com/640/480/arch">
</section>

代码笔：https://codepen.io/Rhys_Eng/pen/NWdwxaO

Answer 1

要解决透明图像相互重叠的问题，您可以使用当前技术在新图像显示在其上时淡出底层图像。为此，请为其动画添加 1 秒的延迟。试试这个：

section img {
  position: absolute;
  width: 200px;
  animation: fade 1s infinite alternate;
}

.bottom {
  animation-delay: 1s;
}

@keyframes fade {
  0% { opacity: 1; }
  25% { opacity: 1; }
  75% { opacity: 0; }
  100% { opacity: 0; }
}

<section>
  <img class="bottom" src="https://placeimg.com/640/480/nature">
  <img class="top" src="https://placeimg.com/640/480/arch">
</section>

如果你想在不褪色的情况下改变图像，同时仍然单独使用 CSS，那么你可以将关键帧修改为：

@keyframes fade {
  0% { opacity: 1; }
  49% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 0; }
}

如何不断交替两张图片

How to constantly alternate two images

html

css

jquery

animate.css