如何不断交替两个图像

Question

我正在尝试使用CSS或jQuery在两个图像之间不断切换。我的工作还可以，但它基本上是把一个图像放在另一个上面，如果我使用的图像是透明的，这会引起问题。

null

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>

null

代码编号:https://codepen.io/rhys_eng/pen/nwdwxao

Answer 1

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

null

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

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