Question

我有一个css推子，但是对于任何人来说，它都会快速消失，我似乎无法找到解决方案。一旦图像褪色，它也将50％进入另一个图像，显示两个图像都是50％，我怎么能绕过这个，所以它只显示1个图像？谢谢！我总是遇到问题并以某种方式添加代码..这里是一个代码链接。

HTML： -

  <div class='slider'>
    <img class="slide1" style="background: url(https://i.imgur.com/Jor6iZe.png)no-repeat center;" alt="">
        <img id="img2" class="slide1" src="http://i.imgur.com/3N7tUT2.png">
    <img class="slide2" style="background: url(https://i.imgur.com/h797HTW.png)no-repeat center;" alt="">
        <img id="img2" class="slide2" src="http://i.imgur.com/0GQZobp.png">
    <img class="slide3" style="background: url(https://i.imgur.com/n04pyfC.png)no-repeat center;" alt="">
        <img id="img2" class="slide3" src="http://i.imgur.com/lfRhiqe.png">
  </div>

CSS

.slider {
  max-width: 1140px;
  height: 200px;
  margin: 20px auto;
  position: relative;
}
.slide1,.slide2,.slide3,.slide4,.slide5 {
  position: absolute;
  width: 100%;
  height: 100%;
}
.slide1 {
      background-size: cover;
    animation:fade 15s infinite;
-webkit-animation:fade 5s infinite;

}
.slide2 {
      background-size: cover;
    animation:fade2 15s infinite;
-webkit-animation:fade2 5s infinite;
}
.slide3 {
      background-size: cover;
    animation:fade3 15s infinite;
-webkit-animation:fade3 5s infinite;
}
@keyframes fade
{
  0%   {opacity:1}
  33.333% { opacity: 0}
  66.666% { opacity: 0}
  100% { opacity: 15}
}
@keyframes fade2
{
  0%   {opacity:0}
  33.333% { opacity: 15}
  66.666% { opacity: 0 }
  100% { opacity: 0}
}
@keyframes fade3
{
  0%   {opacity:0}
  33.333% { opacity: 0}
  66.666% { opacity: 15}
  100% { opacity: 0}
}

Codepen Link

Answer 1

HTML

<div class='slider'>
    <img class="slide1" style="background: url(https://i.imgur.com/Jor6iZe.png)no-repeat center / cover;" alt="">
    <img class="slide2" style="background: url(https://i.imgur.com/h797HTW.png)no-repeat center / cover;" alt="">
    <img class="slide3" style="background: url(https://i.imgur.com/n04pyfC.png)no-repeat center / cover;" alt="">
</div>

CSS

.slide1 {
    animation:fade 10.5s infinite;
    -webkit-animation:fade 10.5s infinite ;

}
.slide2 {
    animation:fade1 10.5s infinite;
    -webkit-animation:fade1 10.5s infinite;
}
.slide3 {
    animation:fade2 10.5s infinite;
    -webkit-animation:fade2 10.5s infinite;
}

@keyframes fade
{
    0%   { opacity: 1 }
    28.57% { opacity: 1 }
    30.95% { opacity: 0 }
    97.61% { opacity: 0 }
    100% { opacity: 1 }
}
@keyframes fade1
{
    0%   { opacity: 0}
    30.95% { opacity: 0 }
    33.33% { opacity: 1 }
    61.9% { opacity: 1 }
    64.28% { opacity: 0 }
    100% { opacity: 0 }
}
@keyframes fade2
{
    0%   { opacity: 0}
    64.28% { opacity: 0 }
    66.66% { opacity: 1 }
    95.23% { opacity: 1 }
    97.61% { opacity: 0 }
    100% { opacity: 0 }
}

如何在图像淡入淡出时添加延迟，并且只能使一个图像可见？e

1 个答案: