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

芝麻小仙女 / 2024-11-13 / 原文

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