css 图片一帧帧播放

在CSS中，我们可以通过一些技巧来实现图片一帧帧播放的效果。最关键的是利用CSS的animation属性，通过关键帧动画来实现。

.animation{
  animation: play .8s steps(7) infinite;
}

@keyframes play{
  0%{background-position: 0 0;}
  100%{background-position: -320px 0;}
}

上述代码中，我们定义了一个animation类，通过animation属性来指定该元素执行名为play的关键帧动画，速度为0.8秒，每个动画步骤为7，重复无限次。

在keyframes中，我们定义了动画的关键帧。在0%时，背景图片位置为0，即第一帧；在100%时，背景图片位置为-320px，即最后一帧。我们通过动画播放的过程中不断更改背景图片位置，从而达到每帧播放。

除此之外，我们还可以通过将背景图片划分成多个小图块，按顺序播放每个小图块来达到帧动画的效果。

.animation{
  width: 100px;
  height: 100px;
  background-image: url('sprite.png');
  animation: play 1s steps(7) infinite;
}

@keyframes play{
  0%{background-position: 0 0;}
  14.28%{background-position: -100px 0;}
  28.56%{background-position: -200px 0;}
  42.84%{background-position: -300px 0;}
  57.12%{background-position: -400px 0;}
  71.40%{background-position: -500px 0;}
  85.66%{background-position: -600px 0;}
  100%{background-position: -700px 0;}
}

上述代码中，我们通过将sprite.png背景图片划分成了7个小图块，每个小图块100px宽，它们横向排列。在关键帧中，我们按照播放顺序依次更改背景图片位置，直到最后一帧。这里需要注意的是，我们将animation的步数由原来的1改为了7，因为我们要播放7帧图片，每帧的宽度为100px。

通过以上两种方式，我们可以轻松地实现CSS中的帧动画效果，用来增强网页的可视化效果，改善用户体验。