CSS水波纹效果

CSS 实现水波纹效果可以使用以下的技术手段：

1. 使用伪元素和动画来创建水波纹效果。
2. 使用 CSS filter 属性来实现模糊效果。

以下是一个简单的水波纹效果的实现：

HTML:

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

CSS:

.wave-wrapper {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
 
.wave-wrapper::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: radial-gradient(circle, #555 10%, transparent 10.01%), radial-gradient(circle, #555 10%, transparent 10.01%);
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
  animation: wave-animation 5s linear infinite;
  opacity: 0.5;
  pointer-events: none; /* Prevent the pseudo element from interfering with other elements */
}
 
@keyframes wave-animation {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 50px 100px, 150px 200px;
  }
}
 
.wave {
  width: 100%;
  height: 100px;
  background-color: #555;
  position: absolute;
  bottom: 0;
  animation: wave-movement 5s linear infinite;
}
 
@keyframes wave-movement {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

这段代码创建了一个水波纹效果，通过::after伪元素实现，背景使用径向渐变来模拟水波的效果，通过animation属性实现水波的移动。这个例子中.wave元素是为了展示水波纹效果的移动方向，实际使用时可以去掉或隐藏.wave元素。