如何解决css使用@keyframes加载图片首次循环时出现白色间隙问题
小编给大家分享一下如何解决css使用@keyframes加载图片首次循环时出现白色间隙问题，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
目前成都创新互联已为千余家的企业提供了网站建设、域名、网站空间、网站托管维护、企业网站设计、尼勒克网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
问题解说:
在使用css 的animations 属性时,首次加载循环会出现白色的间隙,看着有点像页面有刷新的感觉,后面每次循环就不会再有这个问题
问题演示
//html
//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加载图片首次循环时出现白色间隙问题”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
本文题目：如何解决css使用@keyframes加载图片首次循环时出现白色间隙问题
当前URL：
http://bjjierui.cn/article/jppijc.html
