你好，我想制作相互改变的背景图片，我意识到，使用 CSS 动画和关键帧是可能的，但是在我编写了第一轮照片闪烁之后，动画以正常方式继续之后(我认为，问题在于呈现内容和图像的 WebGL 尚未下载)。您能帮我修复此代码以防止出现这种情况吗？
.landing-page {
background-image: linear-gradient(
to bottom,
rgba(104, 104, 104, 0),
rgba(0, 0, 0, 0.739)
);
background-repeat: no-repeat;
background-size: cover;
min-height: 100vh;
width: 100vw;
background-position: center;
display: flex;
align-items: flex-end;
animation: change 120s infinite ease-in-out;
}
@keyframes change {
0% {
background-image: url(/photos/profile1.jpg);
}
20% {
background-image: url(/photos/profile3.jpg);
}
40% {
background-image: url(/photos/profile4.jpg);
}
60% {
background-image: url(/photos/profile5.jpg);
}
80% {
background-image: url(/photos/profile6.jpg);
}
100% {
background-image: url(/photos/profile2.jpg);
}
}
最佳答案
您可以使用链接类型 preload 预加载图像:
The preload value of the element's rel attribute lets you declare fetch requests in the HTML's , specifying resources that your page will need very soon, which you want to start loading early in the page lifecycle, before browsers' main rendering machinery kicks in. This ensures they are available earlier and are less likely to block the page's render, improving performance. ref
<head>
<link rel="preload" as="image" href="/photos/profile1.jpg">
...
<link rel="preload" as="image" href="/photos/profile6.jpg">
还有链接类型prefetch .
此外，将第一帧放在最后，100%，以便在每次迭代之间平滑过渡:
@keyframes change {
0% { background-image: url(/photos/profile1.jpg); }
...
100% { background-image: url(/photos/profile1.jpg); }
}
关于html - 轻弹 css 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70276067/