如何解決css使用@keyframes加載圖片首次循環時出現白色間隙問題

小編給大家分享一下如何解決css使用@keyframes加載圖片首次循環時出現白色間隙問題，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

問題解說:

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

問題演示

//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;
  }
}

最終效果

問題解析

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

以上是“如何解決css使用@keyframes加載圖片首次循環時出現白色間隙問題”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！