CSS实现水波纹扩散动画

// html
<div class="animation"></div>

// JavaScript
.animation {
  position: relative;
  width: 10px;
  height: 10px;
  background: #409eff;
  border-radius: 50%;
  &:after {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    width: 100%;
    height: 100%;
    border: 5px solid #ff1883;
    border-radius: 50%;
    animation: antStatusProcessing 1.2s ease-in-outinfinite;
  }
}
@-webkit-keyframes antStatusProcessing {
  0% {-webkit-transform: scale(.8);
    transform: scale(.8);
    opacity: .5
  }
  to {-webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0
  }
}

@keyframes antStatusProcessing {
  0% {-webkit-transform: scale(.8);
    transform: scale(.8);
    opacity: .5
  }
  to {-webkit-transform: scale(2.4);
    transform: scale(2.4);
    opacity: 0
  }
}