前端实现img图片呼吸灯效果

HTML：
 
<img src="写上图片路径"
      alt=""
      class="img">

style：

/* 呼吸灯 */
.img {
  animation: bgLight 5s linear infinite;
  -webkit-animation: bgLight 5s linear infinite;
}

@keyframes bgLight {
  0% {
    opacity: 1;
  }

  10% {
    opacity: 0.8;
  }

  20% {
    opacity: 0.6;
  }

  30% {
    opacity: 0.4;
  }

  40% {
    opacity: 0.2;
  }

  50% {
    opacity: 0;
  }

  60% {
    opacity: 0.2;
  }

  70% {
    opacity: 0.4;
  }

  80% {
    opacity: 0.6;
  }

  90% {
    opacity: 0.8;
  }

  100% {
    opacity: 1;
  }
}

这样就ok了，闪烁快慢由时间决定我这里设置的5秒