水波纹效果实现

<div class="radar">
    <div class="ripple"></div>
    <div class="ripple"></div>
    <div class="ripple"></div>
  </div>

css:

<style lang="scss">
.radar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  margin: 350px auto;
  .ripple {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    animation: ripple 2s linear infinite;
  }
}
@keyframes ripple {
  to {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}
.radar :nth-child(1) {
  animation-delay: 0.666s;
}
.radar :nth-child(1) {
  animation-delay: 1.322s;
}
</style>