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 并一直保持到最后。

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

#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>

CSS 连续翻转 3 张图片

Rollover continuously 3 images with CSS

html

css

css-transitions

css-animations