css 实现 图片有液态流的 类似水波纹的动画效果

要实现类似水波纹的动画效果，可以通过以下步骤：

1. 首先，在 HTML 中添加一个带有图片的 div，并设置其 position 为 relative。

2. 然后，在 CSS 中添加以下样式：

div {
  position: relative;
  overflow: hidden;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%);
  transform: scale(10);
  opacity: 0;
  animation: ripple 1s linear infinite;
}

@keyframes ripple {
  to {
    opacity: 1;
    transform: scale(20);
  }
}

3. 解释一下上面的 CSS：

div::after 用来创建一个伪元素，覆盖在图片上面，实现水波纹的效果。

background-image 设置为径向渐变，从白色到透明，实现水波纹扩散的效果。

transform 设置为 scale(10)，表示初始状态水波纹半径为图片的 1/10。

opacity 设置为 0，表示初始状态水波纹不可见。

animation 定义了一个名为 ripple 的动画，实现水波纹的扩散和逐渐显现的效果。

4. 最后，通过调整 animation 的 duration 和 timing-function 属性，可以调整动画的速度和缓动效果。

完整的代码如下：

<div>
  <img src="your-image.jpg" alt="">
</div>

div {
  position: relative;
  overflow: hidden;
}

div::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0) 80%);
  transform: scale(10);
  opacity: 0;
  animation: ripple 1s linear infinite;
}

@keyframes ripple {
  to {
    opacity: 1;
    transform: scale(20);
  }
}