css实现圆圈水波扩散

实现圆圈水波扩散效果可以使用CSS的动画和伪元素来实现。下面是一个简单的示例：

首先，在HTML中创建一个圆圈的容器：

<div class="circle"></div>

然后，在CSS中设置容器的样式和动画：

.circle {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background-color: blue;
  position: relative;
  overflow: hidden;
}

.circle::after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3);
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple 2s linear infinite;
}

@keyframes ripple {
  0% {
    transform: scale(0);
    opacity: 1;
  }
  100% {
    transform: scale(4);
    opacity: 0;
  }
}

以上代码中，我们设置了一个圆形的div，并且使用`::after`伪元素为圆形容器创建了一个水波效果。通过设置`transform: scale()`来实现水波的扩散效果，通过设置`opacity`来实现水波逐渐消失的效果。最后，通过设置`animation`属性来控制水波的动画效果，并设置`infinite`使得动画循环播放。

通过以上的代码，我们就实现了一个简单的CSS圆圈水波扩散效果。你可以根据自己的需求进一步调整样式和动画参数来实现更多样的效果。