亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)

  發(fā)布時間：2020-02-25 15:45:18   作者：沒有確定的名字   我要評論
這篇文章主要介紹了快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏),本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下

問題解說:

在使用css 的animations 屬性時,首次加載循環(huán)會出現(xiàn)白色的間隙,看著有點像頁面有刷新的感覺,后面每次循環(huán)就不會再有這個問題

問題演示

 

//html
 <div class="container">
        <div class="first"> </div>
  </div>
//less
.container {
  width: 100vw;
  height: 100%;
}
.container .first {
  width: 100vw;
  height: 100vh;
  animation: bgmove 10s infinite;
}
@keyframes bgmove {
  0% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
  15% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  30% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  45% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  60% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  80% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  100% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
}

解決辦法

//less
.container {
  width: 100vw;
  height: 100%;
}
.container .first {
  width: 100vw;
  height: 100vh;
  background:url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-2\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-4\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-5\_1.jpg"),
             url("https://sqimg.qq.com/qq\_product\_operations/im/pcqq/9.0/firstscreen\_img/BG-1\_1.jpg");
  animation: bgmove 10s infinite;
}
@keyframes bgmove {
  0% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
  15% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  30% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-2_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  45% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-4_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  60% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-5_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  80% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1_1.jpg") no-repeat center center;
    opacity: 1;
    background-size: cover;
  }
  100% {
    background: url("https://sqimg.qq.com/qq_product_operations/im/pcqq/9.0/firstscreen_img/BG-1.jpg") no-repeat center center;
    background-size: cover;
    opacity: 1;
  }
}

最終效果

 

問題解析

圖片的加載一般有兩種情況, 圖片的預(yù)加載 和 圖片的懶加載 ,在這里就涉及到圖片的預(yù)加載問題,當(dāng)頁面的圖片過多的時候,服務(wù)器的壓力就會大,加載圖片一次性顯示會有不連貫所以在第一次將所有的圖片都加載下來,這樣后面在使用這些圖片的時候就是緩存在本地的資源,加載速度也會塊很多,就不會出現(xiàn)白色斷層

到此這篇關(guān)于快速解決css使用@keyframes加載圖片首次循環(huán)時出現(xiàn)白色間隙問題(閃屏)的文章就介紹到這了,更多相關(guān)css keyframes加載圖片內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論