如何实现滑块首张图片页面加载即显，再启动轮播动画？

原代码中所有图片初始opacity设为0，且第一张图的动画延迟16秒，导致页面加载后无法立即看到第一张图。以下是修改方案：

修改后的CSS代码 #

.container_slider_css {
  position: relative;
  width: 100%;
  height: 200px;
  overflow: hidden;
}

.photo_slider_css {
  position: absolute;
  animation: round 24s infinite;
  opacity: 0;
  width: 100%;
}

/* 让第一张图片页面加载时立即显示 */
.photo_slider_css:first-child {
  opacity: 1;
}

@keyframes round {
  /* 每张图占用8秒周期（24s/3），包含0.5s淡入、7s显示、0.5s淡出 */
  0% { opacity: 0; }
  2% { opacity: 1; }
  31% { opacity: 1; }
  33% { opacity: 0; }
  100% { opacity: 0; }
}

/* 调整动画延迟，保证轮播顺序为：第一张 → 第二张 → 第三张 → 循环 */
img:nth-child(1) {
  animation-delay: 16s;
}

img:nth-child(2) {
  animation-delay: 0s;
}

img:nth-child(3) {
  animation-delay: 8s;
}

说明 #

1. 给第一张图片单独设置初始opacity:1，覆盖默认的透明状态，实现页面加载即显示
2. 重新定义关键帧，让每张图在24秒的循环周期内，用固定时间段完成淡入、显示、淡出
3. 调整各图片的动画延迟，使轮播衔接自然：
   • 初始显示第一张图
   • 8秒后第二张图淡入，替换第一张
   • 16秒后第三张图淡入，替换第二张
   • 24秒时循环，第一张图再次淡入，完成一轮轮播

原HTML代码无需修改 #

<div class="container_slider_css">
  <img class="photo_slider_css" src="https://i.pinimg.com/736x/f4/d2/96/f4d2961b652880be432fb9580891ed62.jpg" alt="">
  <img class="photo_slider_css" src="https://funart.pro/uploads/posts/2021-04/1618119326_16-p-kotiki-obnimashki-zhivotnie-krasivo-foto-16.jpg" alt="">
  <img class="photo_slider_css" src="https://cs11.pikabu.ru/post_img/2019/02/04/12/1549312329147951618.jpg" alt="">
</div>

内容的提问来源于stack exchange，提问作者Капуста