仅用CSS3与HTML5实现的轮播图淡入淡出动画失效求助

嘿，作为刚接触CSS3和HTML5的新手，能把PSD转成代码已经很棒了！我看了你的代码，发现几个小细节导致动画没生效，咱们一步步来修复：

主要问题排查 #

• 父元素定位写错：.slider的position属性写成了rela，少了最后几个字母，应该是position: relative——这是子元素用absolute定位的核心前提，不然滑块会乱跑，动画逻辑也会被打乱。
• 动画时长单位不统一：fade动画用了30000s（整整3万秒！），而fade2用了30000ms（30秒），这两个时长差了1000倍，肯定看不到切换效果。得统一成相同的单位，比如3s或者3000ms。
• hover选择器拼写错误：CSS里箭头的类是.previous和.next，但hover效果写的是.prev:hover，少了个ious，所以鼠标悬停的样式根本不会生效。
• 层级与动画冲突：手动点击radio时，你给选中的滑块加了z-index:10和click动画，但原来的fade/fade2自动动画还在持续运行，导致层级和透明度的逻辑混乱，两种动画互相干扰。

修正后的完整代码 #

CSS部分 #

/* 统一自动动画时长为6秒，每张图显示3秒，方便测试 */
@keyframes fade {
  0% { opacity: 1; }
  45% { opacity: 1; }
  50% { opacity: 0; }
  95% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fade2 {
  0% { opacity: 0; }
  45% { opacity: 0; }
  50% { opacity: 1; }
  95% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes click {
  0% { opacity: .4; }
  100% { opacity: 1; }
}

#i1, #i2 {
  display: none;
}

/* 修复position属性，添加overflow防止滑块溢出 */
.slider {
  width: 100%;
  height: 550px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}

#first, #second {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 0.5s ease; /* 手动切换时的平滑过渡 */
}

.previous, .next {
  width: 35px;
  height: 70px;
  position: absolute;
  top: 40%;
  z-index: 20; /* 确保箭头始终在滑块上层 */
  cursor: pointer;
  background-color: rgba(70, 70, 70, 0.6);
  border-radius: 0px 50px 50px 0px;
}

.next {
  right: 0;
  border-radius: 50px 0px 0px 50px;
}

/* 修复hover选择器拼写 */
.previous:hover, .next:hover {
  transition: .3s;
  background-color: rgba(99, 99, 99, 1);
}

.fas.fa-chevron-left {
  position: absolute;
  left: 0;
  top: 30%;
  margin-left: 5px;
  color: #fff;
  font-size: 30px;
}

.fas.fa-chevron-right {
  position: absolute;
  right: 0;
  top: 30%;
  margin-right: 5px;
  color: white;
  font-size: 30px;
}

/* 自动播放动画 */
.slider div#first {
  background: url('img1.jpg') no-repeat center;
  background-size: cover;
  animation: fade 6s infinite linear;
}

.slider div#second {
  background: url('img2.jpg') no-repeat center;
  background-size: cover;
  animation: fade2 6s infinite linear;
}

/* 手动切换时覆盖自动动画，避免冲突 */
#i1:checked ~ #first {
  opacity: 1;
  z-index: 10;
  animation: none; /* 暂停自动动画 */
}

#i2:checked ~ #second {
  opacity: 1;
  z-index: 10;
  animation: none; /* 暂停自动动画 */
}

/* 未选中的滑块隐藏 */
#i1:checked ~ #second {
  opacity: 0;
  z-index: 5;
}

#i2:checked ~ #first {
  opacity: 0;
  z-index: 5;
}

HTML部分 #

<body>
  <div class="slider">
    <input type="radio" id="i1" name="images" checked />
    <input type="radio" id="i2" name="images" />
    
    <div id="first">
      <h1>WEBAGENCY: L'AGANCE DE TOUS <br> VOS PROJETS !</h1>
      <p>Vous avez un projet ? La WebAgency vous aide à les realiser !</p>
      <label class="previous" for="i2"><i class="fas fa-chevron-left"></i></label>
      <label class="next" for="i2"><i class="fas fa-chevron-right"></i></label>
    </div>
    
    <div id="second">
      <label class="previous" for="i1"><i class="fas fa-chevron-left"></i></label>
      <label class="next" for="i1"><i class="fas fa-chevron-right"></i></label>
    </div>
  </div>
</body>

额外优化说明 #

1. 给.slider加了overflow: hidden，防止滑块超出容器范围影响页面布局。
2. 手动切换时暂停自动动画，避免两种动画逻辑互相干扰。
3. 给滑块加了transition: opacity 0.5s ease，让手动切换也有平滑的淡入淡出效果。
4. 把箭头的z-index设为20，确保始终在滑块上方，不会被遮挡。

这样调整后，自动循环的淡入淡出动画就能正常工作，同时手动点击箭头也能流畅切换啦！

内容的提问来源于stack exchange，提问作者Francisco Rosales