如何实现jonhopkins站点图片hover时的波纹模糊类特效？

以下是3种不同实现成本、不同效果自由度的可行方案：

方案1：CSS + 内嵌SVG滤镜（最低成本） #

无需引入外部依赖，几行代码即可实现基础波纹模糊效果，适配性好，适合大部分常规场景。

• 首先在HTML中内嵌SVG滤镜定义，使用湍流和位移映射实现波纹扭曲，叠加高斯模糊实现柔化效果：

<svg width="0" height="0" style="position: absolute; visibility: hidden;">
  <filter id="wavyBlurFilter">
    <!-- 生成湍流噪声，控制波纹纹理 -->
    <feTurbulence type="fractalNoise" baseFrequency="0.012" numOctaves="2" result="noiseMap" />
    <!-- 用噪声图偏移原图像素，实现扭曲效果 -->
    <feDisplacementMap in="SourceGraphic" in2="noiseMap" scale="12" xChannelSelector="R" yChannelSelector="G" />
    <!-- 叠加高斯模糊，强化柔化质感 -->
    <feGaussianBlur stdDeviation="2.5" />
  </filter>
</svg>

• 给目标图片绑定CSS hover规则，加过渡动画提升流畅度：

.wavy-effect-img {
  transition: filter 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.wavy-effect-img:hover {
  filter: url(#wavyBlurFilter);
}

可调整参数说明：

• baseFrequency：数值越大波纹越细密，越小波纹越平缓
• scale：数值越大扭曲幅度越强，越小扭曲越弱
• stdDeviation：数值越大模糊程度越高
  如果需要实现动态流动的波纹效果，可以给<feTurbulence>标签添加SMIL动画，hover时触发参数动态变化即可。

方案2：Canvas实现（高自由度） #

适合需要自定义波纹运动规则、特殊衰减逻辑的场景，效果可定制程度远高于SVG滤镜。

• 实现逻辑：将原图绘制到离屏Canvas中，hover时通过requestAnimationFrame启动渲染循环，每一帧用Perlin噪声算法计算像素偏移量，叠加模糊算法后输出到可见Canvas上。
• 优势：可自定义波纹的运动方向、触发位置、扩散衰减效果，能实现更细腻的交互反馈。

方案3：WebGL Shader实现（高性能高还原） #

适合对性能要求高、需要高度还原动态波纹效果的场景，GPU渲染效率远高于CPU计算的Canvas方案，大尺寸图片也不会出现卡顿。

• 实现逻辑：在片元着色器中内置噪声计算函数，hover状态下传入时间参数和强度参数，实时计算每个像素的偏移值和模糊权重，直接由GPU渲染输出。
• 优势：可以实现非常流畅的动态波纹流动效果，性能开销极低。

内容的提问来源于stack exchange，提问作者iBooface