/* 定义关键帧 */ @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预先引入接下来所需的所有图片,网页加载过程中相同的图片会下载一次并保存在缓存里,接下来再使用同样的图片就不会再去下载了,即图片可以复用。