我使用 css 为我的背景制作了一个简单的幻灯片，但是，因为我使用的是关键帧，所以我不知道如何使所有背景都使用 background-size: cover 。我希望所有图片都能正确适合屏幕。
当您第一次打开网站时，图片加载时间大约需要 2 秒。（它只是显示白色，然后你就会看到图片加载）
最后我还想让网站响应大小，例如使背景图片根据屏幕尺寸改变大小。
如果我用普通的
body {
background-image: url("picture.jpg");
}
然后我会使用@media，但在这种情况下我不知道什么会起作用。
另外，正如你所看到的，我已经做了相当多的数字％，我试图让图片在屏幕上停留更长时间，同时使旋转动画更快。
这是我的 css （我知道这是制作背景幻灯片的愚蠢方法，但它是最简单的:)）
body {
background-size: cover;
animation: div 25s infinite;
height: 100vh;
margin: 0;
}
@keyframes div {
0% {
background-image: url("4.jpg");
opacity: 1;
}
15% {
background-image: url("4.jpg");
opacity: 1;
}
25% {
background-image: url("3.jpg");
opacity: 1;
}
35% {
background-image: url("3.jpg");
opacity: 1;
}
45% {
background-image: url("1.jpg");
opacity: 1;
}
55% {
background-image: url("1.jpg");
opacity: 1;
}
65% {
background-image: url("5.jpg");
opacity: 1;
}
75% {
background-image: url("5.jpg");
opacity: 1;
}
85% {
background-image: url("4.jpg");
opacity: 1;
}
100% {
background-image: url("4.jpg");
opacity: 1;
}
}
这是网站：
https://student.oedu.se/~sc0007/sak/sida_1/sida_1.html
30秒到达战场
相关分类