CSS水波纹效果

效果图：

1.创建一个div

 <div class="point1" @click="handlePoint(1)"></div>

2.设置样式

  .point1{width: 1rem;height: 1rem;background: #2ce92f;position: absolute;border-radius: 50%;z-index: 999;cursor: pointer;}

3.设置伪元素样式

  .point1::after {width: 100%;height: 100%;content: "";border-radius: 50%;position: absolute;top: 0;left: 0;z-index: -2;background-color: #2ce92f;animation: dot-play 4s linear 400ms infinite;}.point1::before {width: 100%;height: 100%;content: "";border-radius: 50%;position: absolute;top: 0;left: 0;z-index: -1;background-color: #2ce92f;animation: dot-play 4s linear 200ms infinite;animation-delay: 2s; /* 延迟 2s */}

4.设置动画效果

  @keyframes dot-play {from {transform: scale(1);opacity: 0.8;}to {transform: scale(4);opacity: 0.1;}}