css 制作水波纹效果

<div class="mapItem">
  <div class="item item1"></div>
  <div class="item item2"></div>
  <div class="item item3"></div>
  <div class="item item4"></div>
</div>

@keyframes scaless {
  0% {
    transform: scale(0);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}
.mapItem {
  /*水波纹圈的大小*/
  width: 3vw;
  height: 3vh;
  position: relative;
  .item {
    width: 3vw;
    height: 3vh;
    position: absolute;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .item:before {
    content: "";
    position: absolute;
    left: -1px;
    top: -1px;
    display: inline-block;
    width: 100%;
    height: 100%;
    border: 1px solid rgb(1, 214, 214, 1);
    border-radius: 100%;
    opacity: 0;
    background: radial-gradient(
      circle,
      #029696,
      rgba(0, 234, 234, 0.5),
      rgba(0, 234, 234, 0.8)
    );
    animation: scaless 5s infinite cubic-bezier(0, 0, 0.49, 1.02);
  }

  .item1:before {
    animation-delay: 0s;
  }

  .item2:before {
    animation-delay: 1s;
  }

  .item3:before {
    animation-delay: 2s;
  }

  .item4:before {
    animation-delay: 3s;
  }

  .item5::before {
    animation-delay: 4s;
  }
}