使用CSS在循环中隐藏和显示3个图像

hrirmatl 于 2023-01-22 发布在其他

关注(0)|答案(1)|浏览(231)

尝试循环通过3个图像，每次只显示一个7秒，然后消失，然后显示序列中的下一个，然后下一个图像。循环需要无限，没有"过渡/褪色"延迟。
这些图像是GIF动画，所以到目前为止，试图将时间与过渡对齐是失败的。
当前使用此：

.images {
  margin: auto;
}

.images img {
  position: absolute;
  -webkit-animation: fade 21s infinite;
  animation: fade 21s infinite;
}

@keyframes fade {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

-webkit-@keyframes fade {
  0% {
    opacity: 1;
  }
  15% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

#img1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

#img2 {
  -webkit-animation-delay: -7s;
  animation-delay: -7s;
}

#img3 {
  -webkit-animation-delay: -14s;
  animation-delay: -14s;
}

<div class="images">
  <img id="img1" src="https://example.com/gif-1.gif">
  <img id="img2" src="https://example.com/gif-2.gif">
  <img id="img3" src="https://example.com/gif-3.gif">
</div>

任何帮助都将不胜感激

css

来源：https://stackoverflow.com/questions/75160103/hide-show-3-images-on-a-loop-using-css

1条答案

按热度按时间

pgpifvop1#

您可以在此定义变量中的持续时间，以控制单个图像的显示时间。
我使用一组关键帧，将每张图像的opacity更改为animation-duration的1（其余时间更改为0）。
不幸的是，calc不能用于定义关键帧的百分比，因此如果您更改图像的数量，您还需要手动更改这些百分比，如代码中的注解所述。
网格显示用作position: relative和position: absolute的替代。fetchpriority用于第一个图像以提高其优先级（因为它是动画的第一个图像，必须尽快加载）。

.loop {
   --time: 7s;
   display: grid;
}

/* show animation only if user hasn't set a preference,
   otherwise just show stacked images */
@media (prefers-reduced-motion: no-preference) {
  .loop img {   
    grid-area: 1/1;
    animation: rotate calc(var(--time) * 3) linear 0s infinite;
  }
   
  .loop img:nth-child(2) { animation-delay: calc(var(--time) * -2); }
  .loop img:nth-child(3) { animation-delay: calc(var(--time) * -1); }
}

@keyframes rotate {
   /* 33.33% is (100% / number of images) */
   0%, 33.33% { opacity: 1; }
   /* 33.34% is (100% / number of images) + 0.01 */
   33.34%, 100% { opacity: 0; }  
}

<div class="loop">
  <img src="https://picsum.photos/id/237/300/200/" fetchpriority="high" />
  <img src="https://picsum.photos/id/238/300/200/" />
  <img src="https://picsum.photos/id/239/300/200/" />
</div>

顺便说一句，为了方便访问，你应该让用户能够停止每个动画超过5秒，因为它可能会引起癫痫发作。在任何情况下，旋转图像的速度不要超过每秒3次。

赞(0）回复(0）举报 2023-01-22

我来回答

使用CSS在循环中隐藏和显示3个图像

1条答案

相关问题

热门标签

最新问答