如何解决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加载图片首次循环时出现白色间隙问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！