帧动画，使用base64

最近在项目中要做一个帧动画（通过快速更换背景图片，达到动画的效果）

一开始是这样写的

// 生成帧动画
// 用背景图片的方式播放所以，1:要有宽高，2:元素内最好没有有东西，否则会遮住背景
export const createAnimation = (imglist, name) => {
  const dt = document.getElementById('dt') // dt是事先在index页面写好的一个style标签
  const X = 100 / (imglist.length - 1)
  let str = ''
  for (let i = 0; i < imglist.length; i++) {
    const img = imglist[i]
    str += (X * i) + '%{background: url(' + img + ') no-repeat center;background-size: cover;}'
  }
  dt.innerHTML = '@keyframes ' + name + '{' + str + '}'
}

这种方式有个问题，就是当图片过多，资源加载慢的时候，第一次加载会出现卡顿

现在修改成用base64的方式，因为base64不需要加载请求，所以肯定不会出现卡顿的现象

在index.html页面中引入写好的样式

在URL中替换成base64

再在页面中使用就不会再卡了