文章來源地址http://www.zghlxwxcb.cn/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;
  }
}

到了這里，關(guān)于呼吸燈效果css的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！