Question

我想调整下面的现有代码，它可以支持两个以上的图像。

HTML：

<div id="cf">
  <img class="bottom" src="<?php bloginfo('template_directory') ?>/assets/img/image1" />
  <img class="top" src="<?php bloginfo('template_directory') ?>/assets/img/image2" />
</div>

CSS：

#cf {
  position:relative;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 4s ease-in-out;
  -moz-transition: opacity 4s ease-in-out;
  -o-transition: opacity 4s ease-in-out;
  transition: opacity 4s ease-in-out;
}

@keyframes cf3FadeInOut {
  0% {
    opacity:1;
  }
  45% {
    opacity:1;
  }
  55% {
    opacity:0;
  }
  100% {
    opacity:0;
  }
}

#cf img.top {
  animation-name: cf3FadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-direction: alternate;
}

我知道它很接近，但我不确定如何写它所以它会支持更多的图像。想法或建议？

Answer 1

设置一个类，包含动画。使用此类可获得所需的图像。

实施例

＆＃13;

@keyframes fadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.fadeOut {
  opacity: 0;
  animation-name: fadeOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 4s;
  animation-direction: alternate;
}

＆＃13;

<img class="fadeOut" src="http://via.placeholder.com/40x40">
<img class="fadeOut" src="http://via.placeholder.com/40x40">
<img class="fadeOut" src="http://via.placeholder.com/40x40">

＆＃13;

如何创建淡入/淡出图像动画

1 个答案:

实施例