我的滑块在第一轮滑动中“闪烁”,之后滑动完美,没有任何闪烁。如何消除闪烁?
我的代码:
HTML:
<div class="slider"></div>
CSS:
* {
margin: 0px;
padding: 0px;
}
body {
background-color: #444;
}
.slider {
width: 600px;
height: 400px;
margin: 100px auto;
background-image: url(image/1.jpg);
background-repeat: no-repeat;
background-size: cover;
animation: slide 12s infinite;
transition: 600ms;
box-shadow: 0 0px 50px rgba(0, 0, 0, 1), inset 0 0px 400px rgba(0, 0, 0, .6);
border-radius: 5px;
}
@keyframes slide {
20% {
background-image: url(image/2.jpg);
}
40% {
background-image: url(image/3.jpg);
}
60% {
background-image: url(image/4.jpg);
}
80% {
background-image: url(image/5.jpg);
}
100% {
background-image: url(image/1.jpg);
}
}
第一轮幻灯片具有这种效果,在不平滑的地方,在第一轮之后,其他轮次完全显示出我希望它们成为..有什么帮助吗?对不起,如果帖子不好,我第一次在这里写。谢谢
我试图使滑块全屏显示,在闪烁时保持不变,在第一轮中为白色闪烁,在第一轮后为幻灯片项目之间没有白色闪烁
就像我在评论中提到的那样,闪烁是由于第一轮中尚未加载图像而造成的。您可以尝试通过将图像作为<img>
标签添加到隐藏的div
中来尝试预加载图像,例如