我用關鍵幀為我的背景制作了一個簡單的 css 幻燈片，并將每張圖片的大小調整為大約 60kb（它們看起來很糟糕，但我正在測試它是否有效），令我驚訝的是它不起作用，圖片仍然必須加載。這是我的幻燈片的 css，不確定它是否有幫助，但無論如何我都會把它放出來。body { background-size: cover; animation: div 20s infinite; height: 100vh; margin: 0; background-position: center; background-repeat: no-repeat; background-blend-mode: darken;}html { background: rgba(255, 255, 255, 0.53);}@keyframes div { 0% { background-image: url("test.jpg"); } 20% { background-image: url("test.jpg"); } 40% { background-image: url("test2.jpg"); } 80% { background-image: url("test2.jpg"); } 100% { background-image: url("test.jpg"); }
2 回答
慕雪6442864
TA貢獻1812條經驗 獲得超5個贊
首先加載所有它們，否則即使圖像尺寸很小，您也需要等待關鍵幀內的加載。然后，您可以設置背景大小的動畫以一次顯示一個
body {
animation: div 5s infinite;
height: 100vh;
margin: 0;
background-image:
url(https://i.picsum.photos/id/110/800/800.jpg),
url(https://i.picsum.photos/id/151/800/800.jpg),
url(https://i.picsum.photos/id/127/800/800.jpg),
url(https://i.picsum.photos/id/251/800/800.jpg),
url(https://i.picsum.photos/id/126/800/800.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
html {
background: rgba(255, 255, 255, 0.53);
}
@keyframes div {
20% {
background-size: cover,0 0,0 0,0 0,0 0;
}
40% {
background-size: 0 0,cover,0 0,0 0,0 0;
}
60% {
background-size: 0 0,0 0,cover,0 0,0 0;
}
80% {
background-size: 0 0,0 0,0 0,cover,0 0;
}
100% {
background-size: 0 0,0 0,0 0,0 0,cover;
}
}
吃雞游戲
TA貢獻1829條經驗 獲得超7個贊
為您想要使用的任何關鍵幀創建一個臨時 div，并在頁面加載時在后臺啟動動畫。像這樣的東西：
.temp-hidden-div {
animation: div 1 100ms;
/*it's better to put a smaller duration here since this animation must run for the
shortest amount of time possible*/
}
- 2 回答
- 0 關注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消