css实现呼吸灯动效

最新推荐文章于 2023-11-09 14:53:54 发布

小天使娜娜

最新推荐文章于 2023-11-09 14:53:54 发布

阅读量2.6k

点赞数

文章标签： CSS 呼吸灯动效前端

本文链接：https://blog.csdn.net/localhost_1314/article/details/96483918

版权

先看效果：

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

代码：

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