css帧动画

https://blog.csdn.net/joyce_lcy/article/details/78711322

.bg-anim{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  animation: head-bg-run 3s steps(1,end) infinite;
}

@keyframes head-bg-run{
  0%{
    background-image: url("../static/animationPic/headBg/bg0.png");
  }
  4.33%{
    background-image: url("../static/animationPic/headBg/bg1.png");
  }
  8.66%{
    background-image: url("../static/animationPic/headBg/bg2.png");
  }
  12.99%{
    background-image: url("../static/animationPic/headBg/bg3.png");
  }
  17.32%{
    background-image: url("../static/animationPic/headBg/bg4.png");
  }
  21.65%{
    background-image: url("../static/animationPic/headBg/bg5.png");
  }
  25%{
    background-image: url("../static/animationPic/headBg/bg6.png");
  }
  29%{
    background-image: url("../static/animationPic/headBg/bg7.png");
  }
  33%{
    background-image: url("../static/animationPic/headBg/bg8.png");
  }
  37%{
    background-image: url("../static/animationPic/headBg/bg9.png");
  }
  41%{
    background-image: url("../static/animationPic/headBg/bg10.png");
  }
  45%{
    background-image: url("../static/animationPic/headBg/bg11.png");
  }
  49%{
    background-image: url("../static/animationPic/headBg/bg12.png");
  }
  53%{
    background-image: url("../static/animationPic/headBg/bg13.png");
  }
  59%{
    background-image: url("../static/animationPic/headBg/bg14.png");
  }
  65%{
    background-image: url("../static/animationPic/headBg/bg15.png");
  }
  70%{
    background-image: url("../static/animationPic/headBg/bg16.png");
  }
  75%{
    background-image: url("../static/animationPic/headBg/bg17.png");
  }
  80%{
    background-image: url("../static/animationPic/headBg/bg19.png");
  }
  85%{
    background-image: url("../static/animationPic/headBg/bg20.png");
  }
  90%{
    background-image: url("../static/animationPic/headBg/bg21.png");
  }
  95%{
    background-image: url("../static/animationPic/headBg/bg22.png");
  }
  100%{
    background-image: url("../static/animationPic/headBg/bg23.png");
  }

}