2 回答

TA貢獻(xiàn)1812條經(jīng)驗(yàn) 獲得超5個(gè)贊
首先加載所有它們,否則即使圖像尺寸很小,您也需要等待關(guān)鍵幀內(nèi)的加載。然后,您可以設(shè)置背景大小的動(dòng)畫(huà)以一次顯示一個(gè)
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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
為您想要使用的任何關(guān)鍵幀創(chuàng)建一個(gè)臨時(shí) div,并在頁(yè)面加載時(shí)在后臺(tái)啟動(dòng)動(dòng)畫(huà)。像這樣的東西:
.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 關(guān)注
- 154 瀏覽
添加回答
舉報(bào)