css实现序列帧闪电动效_闪光序列帧

先看效果：

实现原理

1、需要视觉设计师提供一张雪碧图，包含多张动画状态，也就是所谓的序列帧，依次排列在一张图上；

2、前端通过css去改变背景图的位置；

3、将动画持续反复，类似于我么小时候玩过的翻书小动画；

代码：

<div class="rightLighting"></div>
 
.rightLighting{
  width:86px;
  height:49px;
  position: absolute;
  right:64px;
  bottom:27px;
  background: url("../../assets/image/drugRight/redlightning.png");
  animation: redLighting 4s steps(45) infinite;
  animation-direction:alternate;
}
@keyframes redLighting {
  0%{
    background-position-y: 0;
  }
  100%{
    background-position-y: -2205px;
  }
}