html - 使用 CSS 连续翻转 3 个图像

Question

我是 CSS 的新手，我被这段代码困住了。它显示了第一张图片，当我将鼠标放在上面时，它变为 second.jpg，但第三张不起作用。我想将鼠标悬停并更改为 second.jpg，然后在几秒钟后更改为 third.jpg，然后在几秒钟后再次更改为 first.jpg 并在鼠标悬停时不断重复。 有人可以帮助我吗？

#cf {
    position:relative;
    height:400px;
    width:273px;
    margin:0 auto;
  }

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

  #cf img.top:hover {
    opacity:0;
  }

<div id="cf">
  <img class="top" src="first.jpg" />
  <img class="bottom" src="second.jpg" />
  <img class="third" src="third.jpg" />
</div>

Answer 1

不能使用 transition 连续旋转多个图像，因为转换仅指定一次性状态更改。因此，充其量您只能使用过渡在图像中旋转一次。

对于此用例，您的最佳选择是使用允许循环的 CSS3 动画。假设您有 3 张图片，并且每张图片必须显示 1 秒才能显示其下方的图片，则总的 animation-duration 应该是 3s。每张图片必须在 1 秒内从 opacity: 1 变为 opacity: 0，因此动画的关键帧应指定为最多 33%(因为 3s 的 33% = 1s)，图像不透明度为 1，在 33.1% 时它迅速变为 0 并一直保持到最后。

最上面图像的动画可以立即开始，但中间和底部的动画应该只有在它们上面的图像完成动画后才能开始。因此，中间的图像应该有 1 秒的延迟，底部的图像应该有 2 秒的延迟。

#cf {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
}
#cf img {
  position: absolute;
  left: 0;
}
#cf:hover img {
  animation: rotate-in-out 3s linear infinite;
}
#cf:hover img:nth-of-type(1) {
  animation-delay: 0s;
}
#cf:hover img:nth-of-type(2) {
  animation-delay: 1s;
}
#cf:hover img:nth-of-type(3) {
  animation-delay: 2s;
}
#cf img:nth-of-type(2), #cf img:nth-of-type(3) {
  opacity: 0; /* make them invisible initially */
}
@keyframes rotate-in-out {
  0.1%, 33% {
    opacity: 1;
  }
  33.1%, 100% {
    opacity: 0;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="cf">
  <img class="top" src="http://lorempixel.com/200/200/nature/1" />
  <img class="bottom" src="http://lorempixel.com/200/200/nature/2" />
  <img class="third" src="http://lorempixel.com/200/200/nature/3" />
</div>

---

在上面的示例中，旋转有点突然(也就是说，它突然从一张图像变为下一张)。如果你需要它优雅，那么关键帧应该像下面的代码片段一样被修改:

#cf {
  position: relative;
  height: 200px;
  width: 200px;
  margin: 0 auto;
}
#cf img {
  position: absolute;
  left: 0;
}
#cf:hover img {
  animation: rotate-in-out 3s linear infinite;
}
#cf:hover img:nth-of-type(1) {
  animation-delay: 0s;
}
#cf:hover img:nth-of-type(2) {
  animation-delay: 1s;
}
#cf:hover img:nth-of-type(3) {
  animation-delay: 2s;
}
#cf img:nth-of-type(2), #cf img:nth-of-type(3) {
  opacity: 0;
}
@keyframes rotate-in-out {
  16.5%, 33% {
    opacity: 1;
  }
  49.5% {
    opacity: 0;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div id="cf">
  <img class="top" src="http://lorempixel.com/200/200/nature/1" />
  <img class="bottom" src="http://lorempixel.com/200/200/nature/2" />
  <img class="third" src="http://lorempixel.com/200/200/nature/3" />
</div>