呼吸灯效果css

最新推荐文章于 2024-04-24 14:34:29 发布

EstherNi

最新推荐文章于 2024-04-24 14:34:29 发布

阅读量806

点赞数

文章标签： css 前端

本文链接：https://blog.csdn.net/EstherNi/article/details/131684857

版权

在这里插入图片描述

<div class="fatherBreathIcon">
                          <div class="sonBreathIcon" style="background: rgba(188, 36, 36, 1); width: 10px; height: 10px; animation-delay: 0s;"></div>
                          <div class="sonBreathIcon" style="background: rgba(188, 36, 36, 0.8); width: 25px; height: 25px; animation-delay: 0.4s;"></div>
                          <div class="sonBreathIcon" style="background: rgba(188, 36, 36, 0.6); width: 40px; height: 40px; animation-delay: 0.8s;"></div>
                          <div class="sonBreathIcon" style="background: rgba(188, 36, 36, 0.4); width: 55px; height: 55px; animation-delay: 1.2s;"></div>
                          <div class="sonBreathIcon" style="background: rgba(188, 36, 36, 0.2); width: 70px; height: 70px; animation-delay: 1.6s;"></div>
            </div>


.fatherBreathIcon {
  width: 80px;
  height: 80px;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 40%) rotateX(60deg);
}
.sonBreathIcon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  animation-name: iconBreathLight;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-duration: 2s;
  -webkit-user-drag: none;
  filter: none;
  opacity: 0;
}
@keyframes iconBreathLight {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 0.2;
  }
  20% {
    opacity: 0.4;
  }
  30% {
    opacity: 0.6;
  }
  40% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
  60% {
    opacity: 0.8;
  }
  70% {
    opacity: 0.6;
  }
  80% {
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}