css实现动态水波纹效果

CSS可以通过使用伪元素和CSS动画实现动态水波纹效果。以下是一个简单的实现示例：

HTML:

<div class="wave-container">
  <div class="wave"></div>
</div>

CSS:

.wave-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
 
.wave {
  position: absolute;
  width: 200%;
  height: 200%;
  background-image: radial-gradient(circle, #00b4db, transparent);
  background-size: cover;
  background-position: 50%;
  animation: wave-animation 10s linear infinite;
}
 
@keyframes wave-animation {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

这段代码创建了一个.wave-container容器，在其中有一个.wave伪元素，该元素使用了径向渐变背景模拟水波纹效果。通过@keyframes定义的wave-animation动画，伪元素水波纹背景会不断地从右向左平移，形成动态的水波纹效果。