<div class="breath" title="呼吸灯"></div>
.breath {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  opacity: 0.1;
  overflow: hidden;
  background: #ff3;
  margin: 25% auto;

  animation-name: breath;
  animation-duration: 3s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes breath {
  from {
    opacity: 0.1;
  }
  50% {
    opacity: 0.5;
  }
  to {
    opacity: 0.1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.