CSS：多张图片闪烁效果，一个接一个

问题描述

我正在尝试使1张背景图像顶部的3张图像在同一位置交替闪烁。我尝试这样做，但实际上是随机闪烁：两张图像会一起闪烁，而另一张单独闪烁。

我的目标是使每张图像一次出现/闪烁/闪烁（0.5s）一次。

• 第一张图片应首先显示
• 第二张图片应在第一张图片“消失”之后出现
• 第一张图像应该出现在最后一张图像之后（第二张图像消失时）。

我希望这种效果无限循环。

#bsofa{
  position: absolute;
  width: 220px;
  height: 220px;
  top: 713.916px;
  left: 421px;
}
#bsofa1 {
  animation-name: blink;
  animation: blink 1s infinite;
  animation-delay: 0s;
  animation-direction: alternate;
  position: absolute;
  width: 171px;
  height: 128.384px;
  
}
@keyframes blink {
  0% {
       opacity: 1;
   }
   24% {
        opacity: 1;
    }
    25% {
         opacity: 0;
     }
   49% {
       opacity: 0;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 0;
   }
}
#bsofa2 {
  animation-name: blink2;
  animation: blink 1s infinite;
  animation-delay: 0s;
  animation-direction: alternate;
  position: absolute;
  width: 199;
  height: 199px;

}
@keyframes blink2{
  0% {
       opacity: 0;
   }
   24% {
        opacity: 0;
    }
    25% {
         opacity: 1;
     }
   49% {
       opacity: 1;
   }
   50% {
       opacity: 0;
   }
   100% {
       opacity: 0;
   }
}

#bsofa3 {
  animation-name: blink3;
  animation: blink 1s infinite;
  animation-delay: 0s;
  animation-direction: alternate;
  position: absolute;
  width: 183.04px;
  height: 136.987px;
   
}
@keyframes blink3 {
  0% {
       opacity: 0;
   }
   24% {
        opacity: 0;
    }
    25% {
         opacity: 0;
     }
   49% {
       opacity: 0;
   }
   50% {
       opacity: 1;
   }
   100% {
       opacity: 1;
   }
}

<div class="bsofa">
<img id="bsofa" src="images/1d-bsofa.jpg">
<img id="bsofa1" src="images/1d-bsofa1.png">
<img id="bsofa2" src="images/1d-bsofa2.png">
<img id="bsofa3" src="images/1d-bsofa3.png">
</div>

解决方法

我认为您可以使用一些Java脚本实现这一点：

首先，为您要“眨眼”的每个图像提供一个共同的类别，例如：

<img id="bsofa1" class="blinkable" src="images/1d-bsofa1.png">
<img id="bsofa2" class="blinkable" src="images/1d-bsofa2.png">
<img id="bsofa3" class="blinkable" src="images/1d-bsofa3.png">

在CSS中，将display: none设置为.blinkable。接下来，使用“ blinkable”类获取所有元素：

var imgs = document.getElementsByClassName("blinkable")

遍历集合：

for (var x = 0; x < imgs.length; x++) {
    var img = imgs[x]
    var nextImg = (x < 2) ? imgs[x + 1]:imgs[0]
    var delay = setTimeout(500,function() {
        img.style.display = none;
        nextImg.style.display = "block";
    })

    //hijack the loop and set to beginning when at end
    if (x == 2) {
        x = 0
    }
}