css实现序列帧闪电动效

最新推荐文章于 2024-04-08 17:23:06 发布

原创最新推荐文章于 2024-04-08 17:23:06 发布 · 1.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #动效 #闪电 #序列帧

动效专栏收录该内容

3 篇文章

订阅专栏

先看效果：

实现原理

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;
  }
}