css3序列帧动画图片资源初次加载闪屏处理

/* 定义关键帧 */
@keyframes example {0% {background: url(./ani/1.png) centercenter no-repeat;background-size: cover;}……100% {background: url(./ani/48.png) centercenter no-repeat;background-size: cover;}
}.riskContainer {position: relative;width: 100%;height: 100vh;background-color: #22170f;background: url(./images/risk_bg.png) center center no-repeat;background-size: cover;box-sizing: border-box;font-family: "Source Han Serif", "PingFang SC", "Hiragino Sans GB", "思源宋体","宋体", SimSun, sans-serif, "simsun", Arial, serif;overflow: hidden;.video {position: absolute;left: 0;top: 0;z-index: 1;}&::after {width: 100%;height: 100%;content: "";background: url(./ani/1.png) centercenter no-repeat,url(./ani/2.png) center centerno-repeat,……url(./ani/48.png) center centerno-repeat;background-size: cover;display: block;position: absolute;bottom: 0;left: 0;right: 0;top: 0;z-index: 1;animation: example 4s steps(1) infinite;}

　　

定义关帧动画后，如果直接在父元素里调用动画，图片资源过多的情况下初次加载会闪动，因此需要在父元素中提前引入图片，避免此类情况。

 

p.s.

写在css里面的图片是以背景形式存在的，而写在HTML里的是以标签的形式存在的。网页加载过程中，以css背景存在的图片会等结构加载完成（网页的内容全部显示以后），才开始加载。总而言之，网页会先加载标签的内容，然后再加载背景图片，如果引入了大图，那么在第一个图片加载完成之前，之后的图片都不会显示，以此类推。而如果用css预先引入接下来所需的所有图片，网页加载过程中相同的图片会下载一次并保存在缓存里，接下来再使用同样的图片就不会再去下载了，即图片可以复用。