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张图片之前必须显示1秒，则animation-duration总数应为3s。每张图片必须在1秒的时间内从opacity: 1转到opacity: 0，因此动画的关键帧应以最高33%的方式指定（因为33％的3s = 1s）），图像不透明度为1，在33.1%，它快速变为0并保持这种状态直到结束。

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

＆＃13;

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

＆＃13;

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

＆＃13;

在上面的示例中，旋转是一种突然的（即，它突然从一个图像变为另一个图像）。如果你需要它优雅，那么应该修改关键帧，如下面的代码片段所示：

＆＃13;

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

＆＃13;

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

＆＃13;

使用CSS连续翻转3张图像

1 个答案: