使用css3实现雪碧图帧动画

背景:

此需求是在html界面实现,纯原生,没有像vue生命周期那些东西。

场景:

一个单纯的图片背景,想要在上面加个动图。一瞬间脑子里想到两个方案:
一:最省前端功夫的:ui压缩一个gif图出来
二:需要前端写点代码的:把ui提供的多张图片,利用css3动画,进行动画切换,达到动图的效果

情况一:ui压缩出的gif出现白边的问题,就不太好看,而且ui已经尽力了。。。

效果图:
使用css3实现雪碧图帧动画_第1张图片

情况二:使用css3动画属性,也发现了不适用的问题:

效果图:截图不能展示问题

老老实实使用css3.keyframe和animation来实现,这里也发现了问题,图片够小,即使预先在head加载了图片,但是没有添加到body中,可以在network看到图片加载成功,然后在动画里使用延迟,在qq、谷歌均可以正常加载,唯独在谷歌出现依旧出现闪烁。
基于此两种解决方案:

1:在head中写一个js,其目的是,快于页面加载,就生成img标签,赋值图片路径,append到页面。
间接实现图片预先加载,而后进行css3帧动画,当然你的页面不需要用到他,你可以隐藏掉。(此方案不太优雅,但能成事)

图片形式:
使用css3实现雪碧图帧动画_第2张图片

js:

for(var i = 0;i<10;i++){
  var img = new Image()
  img.onload = await function () {}.bind(this)
  img.src='/static/img/'+i+'_03.png'
  document.body.append(img)
}

css:

.frame-logo .lo-wrap .img-bg{
  width: 440px;
  height: 424px;
  display: flex;
  position: absolute;
  top: 3vh;
  left: 9vw;
  background: url('/static/img/frame1/1_03.png');
  background-size:cover;
  animation: identifier_p 2s infinite;
}
@keyframes identifier_p {
  0% {
    background: url('/static/img/frame1/1_03.png');
  }
  7% {
    background: url('/static/img/frame1/2_03.png');
  }
  14% {
    background: url('/static/img/frame1/3_03.png');
  }
  21% {
    background: url('/static/img/frame1/4_03.png');
  }
  28% {
    background: url('/static/img/frame1/5_03.png');
  }
  35% {
    background: url('/static/img/frame1/6_03.png');
  }
  42% {
    background: url('/static/img/frame1/7_03.png');
  }
  49% {
    background: url('/static/img/frame1/8_03.png');
  }
  56% {
    background: url('/static/img/frame1/9_03.png');
  }
  63% {
    background: url('/static/img/frame1/10_03.png');
  }
  70% {
    background: url('/static/img/frame1/11_03.png');
  }
  77% {
    background: url('/static/img/frame1/12_03.png');
  }
  84% {
    background: url('/static/img/frame1/13_03.png');
  }
  91% {
    background: url('/static/img/frame1/14_03.png');
  }
  98% {
    background: url('/static/img/frame1/14_03.png');
  }
  100% {
    background: url('/static/img/frame1/1_03.png');
  }
}

2:使用雪碧图进行实现,将多张帧的图,合成雪碧图,然后改变位置进行实现。
animation: identifier_p 2s steps(1, start) infinite;这行代码中的steps(1, start)是实现的关键,如果没有他,这个动画相当可怕,等同于看一张不停的改变定位的背景图。有了他才能真正称为是“帧动画”,可以说是相当丝滑了,比gif体验好多了。

使用css3实现雪碧图帧动画_第3张图片
使用css3实现雪碧图帧动画_第4张图片
图片形式:
使用css3实现雪碧图帧动画_第5张图片

css:

.frame-logo .lo-wrap .img-bg{
  width: 440px;
  height: 424px;
  display: flex;
  position: absolute;
  top: 3vh;
  left: 9vw;
  background: url('/static/img/test/css_sprites.png');
  background-size:cover;
  animation: identifier_p 2s  steps(1, start) infinite;
}

@keyframes identifier_p {
  0% {
  background: url('/static/img/test/css_sprites.png') -10px -10px;
  }
  7% {
  background: url('/static/img/test/css_sprites.png') -488px -10px;
  }
  14% {
  background: url('/static/img/test/css_sprites.png') -10px -474px;
  }
  21% {
  background: url('/static/img/test/css_sprites.png') -488px -474px;
  }
  28% {
  background: url('/static/img/test/css_sprites.png') -966px -10px;
  }
  35% {
  background: url('/static/img/test/css_sprites.png') -966px -474px;
  }
  42% {
  background: url('/static/img/test/css_sprites.png') -10px -938px;
  }
  49% {
  background: url('/static/img/test/css_sprites.png')  -488px -938px;
  }
  56% {
  background: url('/static/img/test/css_sprites.png') -966px -938px;
  }
  63% {
    background: url('/static/img/test/css_sprites.png') -1444px -10px;
  }
  70% {
    background: url('/static/img/test/css_sprites.png') -1444px -474px;
  }
  77% {
    background: url('/static/img/test/css_sprites.png') -1444px -938px;
  }
  84% {
    background: url('/static/img/test/css_sprites.png')  -10px -1402px;
  }
  91% {
    background: url('/static/img/test/css_sprites.png') -488px -1402px;
  }
  98% {
    background: url('/static/img/test/css_sprites.png') -10px -1402px;
  }
  100% {
  background: url('/static/img/test/css_sprites.png') -488px -1402px;
  }
}

你可能感兴趣的:(CSS3,css3,动画)