静态页面圆形呼吸灯

<div>
  <span class="circleLight size1"></span>
  <span class="circleLight size2"></span>
  <span class="circleLight size3"></span>
</div>

.circleLight {
  position: absolute;
  border-radius: 10px;
  width: 12.5px;
  height: 12.5px;
  background: linear-gradient(#e8dbf1, #e8dbf1);
  border: 1px solid #ffffff #e8dbf1 #e8dbf1 #e8dbf1;
  animation: circle 1s linear infinite;
  -webkit-animation: circle 1s linear infinite;
  display: block;
  box-sizing: border-box;
  box-shadow: 1px 2px 15px #fff;
  &.size1 {
    transform: rotate(-34deg);
    top: 48.16%;
    left: 68.54%;
  }
  &.size2 {
    transform: rotate(-34.8deg);
    top: 49.63%;
    left: 69.83%;
  }
  &.size3 {
    transform: rotate(-34.7deg);
    top: 51.2%;
    left: 71.1%;
  }
}
@keyframes circle {
  50% {
    width: 12px;
    height: 12px;
    transform-origin: center;
    box-shadow: 1px 3px 15px #4f51ed;
  }
}

 

 

呼吸灯