呼吸灯效果css-Toy模板网

这篇具有很好参考价值的文章主要介绍了呼吸灯效果css。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

呼吸灯效果css,css,前端文章来源地址https://www.toymoban.com/news/detail-556132.html

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