css实现呼吸灯动效

最新推荐文章于 2025-09-19 14:01:40 发布

原创最新推荐文章于 2025-09-19 14:01:40 发布 · 2.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #呼吸灯 #动效 #前端

本文介绍了一种使用CSS动画实现的呼吸灯效果。通过调整图片透明度，在网页上创建了一个动态变化的视觉效果。该方法简单易用，适用于多种网页设计场景。

先看效果：

实现原理：改变图片的透明度

代码：

 <div class="breath"></div>

.breath {
  width: 8%;
  height: 77%;
  position: absolute;
  right: 19px;
  top: 17px;
  background: url("../../assets/image/drugRight/BreathingLampL.png") no-repeat;
  background-size: 100% 100%;
  animation: breathLamp 2s alternate infinite;
}
@keyframes breathLamp{
  0%{
    opacity:.2;
  }
  100%{
    opacity:1;
  }
}