问题解说:
在使用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加载图片首次循环时出现白色间隙问题(闪屏)的文章就介绍到这了,更多相关css keyframes加载图片内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
前言 最近在做项目的时候发现,在公司电脑上没问题,在自己电脑上确有问题。做的...
打开你的dreamweaver,然后你可以看到界面上有三种新建站点的方法,如下图,这三...
前言 声明: 该文章中所有测试都是在JDK1.8的环境下。 该文章是我在学习Java中的...
开始使用Amaze UI 1.获取Amaze UI 1.1下载文件 首先打开百度输入:Amaze UI --找...
1 概述 本文主要讲述了 ArrayList 与 LinkedList 的相同以及不同之处,以及两者...
这是第 99 篇不掺水的原创,想获取更多原创好文,请搜索公众号关注我们吧~ 本文...
本文汇集了一些 Dreamweaver 制作网页时的可以用的一些小技巧。希望对您有所帮助...
Dreamweaver网页中的banner图片需要切换,我们可以添加按钮来切换图片,下面我们...
1.青春就像一场烟火,美得让人窒息,却也短暂到让人落泪。 2.怎知我用一转身离...
之前在做顾问和咨询项目的时候,见到了一种非常经典的关于API网关和注册中心的错...