如何不断交替两个图像

如何解决如何不断交替两个图像

我正在尝试使用 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

解决方法

要解决透明图像相互重叠的问题，您可以使用当前的技术在新图像显示在其上时淡出底层图像。为此，为其动画添加 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; }
}