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

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

/* 定义关键帧 */ @keyframes example {   0% {     background: url(./ani/1.png) center       center no-repeat;     background-size: cover;   }   ……   100% {     background: url(./ani/48.png) center       center 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) center         center no-repeat,       url(./ani/2.png) center center         no-repeat,       ……       url(./ani/48.png) center center         no-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预先引入接下来所需的所有图片，网页加载过程中相同的图片会下载一次并保存在缓存里，接下来再使用同样的图片就不会再去下载了，即图片可以复用。