先看效果:
实现原理
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;
}
}