如何解决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
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。