第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

css幻燈片背景必須加載

css幻燈片背景必須加載

墨色風(fēng)雨 2023-10-30 15:02:07
我用關(guān)鍵幀為我的背景制作了一個(gè)簡(jiǎn)單的 css 幻燈片,并將每張圖片的大小調(diào)整為大約 60kb(它們看起來(lái)很糟糕,但我正在測(cè)試它是否有效),令我驚訝的是它不起作用,圖片仍然必須加載。這是我的幻燈片的 css,不確定它是否有幫助,但無(wú)論如何我都會(huì)把它放出來(lái)。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貢獻(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;

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-10-30
?
吃雞游戲

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*/

}


查看完整回答
反對(duì) 回復(fù) 2023-10-30
  • 2 回答
  • 0 關(guān)注
  • 154 瀏覽

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)