滑块上的淡入淡出动画不起作用（仅限 CSS3 和 html5）答案

【问题标题】：fade animation on a slider not working (CSS3 and html5 only)滑块上的淡入淡出动画不起作用（仅限 CSS3 和 html5）
【发布时间】：2018-05-29 20:24:21
【问题描述】：

我是 CSS3 和 HTML5 的初学者，现在我正在尝试创建一个 HTML5 和 CSS3 网站以编写 PSD 模型。

一旦我开始使用滑块，问题就来了。通常它应该是一个带有 2 张图像的轮播滑块，底部有一个进度条和一个动画，以使其循环工作。

所以，首先我创建了一个主 div，其中包含其他两个 div，其中包含无线电输入，这样我可以让下一个和上一个箭头工作，以便从一张幻灯片传递到另一张幻灯片。

然后，在我的 css 文件中，我创建了带有不透明效果的 @keyframes 以继续进行淡入淡出动画。不幸的是，这并没有像我想象的那样工作，只是箭头而不是淡入淡出动画。

有人可以帮我看看我的代码吗？我会很感激的！

这是我的 HTML5 代码：

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

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


 
#i1, #i2{ display: none;}

.slider{
width: 100%;
height: 550px;
margin: 20px auto;
position: rela
}

#first, #second{
position: absolute;
width: 100%;
height: 100%;
}
      
.previous{
width: 35px;
height: 70px;
position: absolute;
top:40%;
left:0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 0px 50px 50px 0px;
}

.next{
width: 35px;
height: 70px;
position: absolute;
top:40%;
right: 0;
background-color: rgba(70, 70, 70,0.6);
border-radius: 50px 0px 0px 50px;
}

.prev: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 30000s infinite linear;
-webkit-animation:fade 30000s infinite linear;
}

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

.slide{z-index:-1;}

#i1:checked ~ #first,
#i2:checked ~ #second
{z-index: 10; animation: click 1s ease-in-out;}

<body>
  <div class="slider">
    <input type="radio" id="i1" name="images" checked />
    <input type="radio" id="i2" name="images" />
    <div class="slide" 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 class="slide" 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>

【问题讨论】：

这很聪明。当您在 jsfiddle.net/n3a1ab5z 中加载功能正常的背景图像 url 时，它似乎按预期工作

标签： html css

【解决方案1】：

很遗憾，我不确定是否可以合并：

底部的进展
侧面的工作按钮
自动前进

只使用 CSS/HTML。您需要将您的状态存储为单选按钮，但是如果您使用线性动画前进，如果用户想要返回会发生什么？如何同步状态？

您可以同时拥有进度和工作按钮。我根据您的代码制作了一个示例，说明如何实现这一目标，并能够添加 2 张以上的幻灯片。

.radio {
  display: none;
}

.slider {
  width: 100%;
  height: 175px;
  position: absolute;
  left: 0;
  top: 0;
}

.slider__slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: 1s opacity;
}

.slider__slide:nth-of-type(1) {
  background: IndianRed;
}

.slider__slide:nth-of-type(2) {
  background: Cornsilk;
}

.slider__slide:nth-of-type(3) {
  background: PaleTurquoise;
}

.button {
  width: 35px;
  height: 70px;
  position: absolute;
  top: 40%;
  background-color: rgba(70, 70, 70, 0.6);
}

.button--previous {
  left: 0;
  border-radius: 0px 50px 50px 0px;
}

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

.button:hover {
  transition: 0.3s;
  background-color: rgba(99, 99, 99, 1);
}

.radio:nth-of-type(1):checked ~ .slider__slide:nth-of-type(1),
.radio:nth-of-type(2):checked ~ .slider__slide:nth-of-type(2),
.radio:nth-of-type(3):checked ~ .slider__slide:nth-of-type(3){
  opacity: 1;
  pointer-events: auto;
}

.progress {
  margin: 0;
  padding: 0;
  position: absolute;
  top: 175px;
  left: 0;
  right: 0;
  text-align: center;
  list-style-type: none;
}

.progress__item {
  position: relative;
  display: inline-block;
  margin: 1px;
  border: 3px solid black;
  width: 16px;
  height: 16px;
}

.radio:nth-of-type(1):checked ~ .progress .progress__item:nth-of-type(1):before,
.radio:nth-of-type(2):checked ~ .progress .progress__item:nth-of-type(2):before,
.radio:nth-of-type(3):checked ~ .progress .progress__item:nth-of-type(3):before{
  position: absolute;
  top: 2px;
  right: 2px;
  bottom: 2px;
  left: 2px;  
  content: '';
  background: black;
}


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

<body>
  <div class="slider">
    <input id="i1" class="radio" name="images" type="radio" checked />
    <input id="i2" class="radio" name="images" type="radio" />
    <input id="i3" class="radio" name="images" type="radio" />
    <div class="slider__slide">
      <h1>FIRST SLIDE</h1>
      <p>First Subtitle</p>
      <label class="button button--previous" for="i3"><i class="fas fa-chevron-left"></i></label>
      <label class="button button--next" for="i2"><i class="fas fa-chevron-right"></i></label>
    </div>
    <div class="slider__slide">
      <h1>SECOND SLIDE</h1>
      <p>Second Subtitle</p>
      <label class="button button--previous" for="i1"><i class="fas fa-chevron-left"></i></label>
      <label class="button button--next" for="i3"><i class="fas fa-chevron-right"></i></label>
    </div>
    <div class="slider__slide">
      <h1>THIRD SLIDE</h1>
      <p>Third Subtitle</p>
      <label class="button button--previous" for="i2"><i class="fas fa-chevron-left"></i></label>
      <label class="button button--next" for="i1"><i class="fas fa-chevron-right"></i></label>
    </div>
    <div class="progress">
      <label class="progress__item" for="i1"></label>
      <label class="progress__item" for="i2"></label>
      <label class="progress__item" for="i3"></label>
    </div>
  </div>
</body>

【讨论】：

您好，感谢您的回答！问题是我正在制作一个 psd 模型，我必须像原来的模型一样尽可能地完成它。只有两个滑块，我们只能看到底部的滑块向前移动，而不显示单选按钮。
为什么不用Javascript？
哈哈，这才是真正的挑战！
否则，我可以做同样的事情，但使用幻灯片效果而不是淡入淡出效果，但我也无法完成此操作