为什么我的滑块在第一轮闪烁?

问题描述 投票:0回答:1

我的滑块在第一轮滑动中“闪烁”,之后滑动完美,没有任何闪烁。如何消除闪烁?

我的代码:

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

第一轮幻灯片具有这种效果,在不平滑的地方,在第一轮之后,其他轮次完全显示出我希望它们成为..有什么帮助吗?对不起,如果帖子不好,我第一次在这里写。谢谢

我试图使滑块全屏显示,在闪烁时保持不变,在第一轮中为白色闪烁,在第一轮后为幻灯片项目之间没有白色闪烁

html css animation slider
1个回答
0
投票

就像我在评论中提到的那样,闪烁是由于第一轮中尚未加载图像而造成的。您可以尝试通过将图像作为<img>标签添加到隐藏的div中来尝试预加载图像,例如

© www.soinside.com 2019 - 2024. All rights reserved.