如何实现鼠标悬停时图片指定区域的平滑模糊过渡效果？

阿华AIGC实验室

2026-4-14

兄弟我太懂你这种困扰了！刚学前端折腾视觉效果的时候，也踩过这种“生硬边界”的坑，别着急，咱们一步步把它改成自然的平滑过渡效果～

首先先搞明白问题出在哪：你之前用clip-path: circle()来裁剪模糊层，这个属性就像用剪刀硬剪出来的形状，边缘是100%锐利的，所以模糊后的区域和原图拼在一起就会有明显的“割裂感”，就像你贴的这张图一样：

你之前尝试的解决方案输出效果：

咱们要做的核心就是给模糊区域加一个渐变透明的边缘，让它和原图自然融合，同时还要让这个模糊区域跟着鼠标走，下面是超详细的新手向步骤：

步骤1：理解核心思路

我们需要两个图层配合实现：

底层：显示原始清晰图片
上层：显示同一张图片的模糊版本，通过**渐变遮罩（mask）**让上层模糊区域的中间清晰显示、边缘逐渐透明，这样和底层原图衔接就完全看不到硬边了
用JS让上层模糊区域的中心实时跟着鼠标移动

步骤2：完整可运行代码（直接复制就能用）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>平滑跟随鼠标的模糊效果</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    .container {
      position: relative;
      width: 100%;
      height: 100vh;
      /* 替换成你自己的图片路径即可 */
      background-image: url('https://via.placeholder.com/800');
      background-size: cover;
      background-position: center;
      overflow: hidden;
    }

    .container::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      /* 继承底层的背景图、尺寸、定位 */
      background-image: inherit;
      background-size: inherit;
      background-position: inherit;
      /* 模糊效果，数值越大越模糊 */
      filter: blur(12px);
      /* 关键：用径向渐变做遮罩，实现软边缘过渡 */
      mask: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(0, 0, 0, 1) 22%,
        rgba(0, 0, 0, 0.6) 27%,
        transparent 32%
      );
      /* 兼容webkit内核浏览器 */
      -webkit-mask: radial-gradient(
        circle at var(--x, 50%) var(--y, 50%),
        rgba(0, 0, 0, 1) 22%,
        rgba(0, 0, 0, 0.6) 27%,
        transparent 32%
      );
      pointer-events: none; /* 不干扰底层的鼠标事件 */
    }
  </style>
</head>
<body>
  <div class="container"></div>

  <script>
    // 获取容器元素
    const container = document.querySelector('.container');
    // 监听鼠标移动事件，实时更新模糊区域位置
    container.addEventListener('mousemove', (e) => {
      // 计算鼠标相对于容器的百分比位置（适配不同屏幕尺寸）
      const x = (e.clientX / container.offsetWidth) * 100;
      const y = (e.clientY / container.offsetHeight) * 100;
      // 更新CSS变量，让模糊区域跟着鼠标走
      container.style.setProperty('--x', `${x}%`);
      container.style.setProperty('--y', `${y}%`);
    });

    // 可选：鼠标离开容器时，把模糊区域移到视口外
    container.addEventListener('mouseleave', () => {
      container.style.setProperty('--x', '-100%');
      container.style.setProperty('--y', '-100%');
    });
  </script>
</body>
</html>

步骤3：新手向细节拆解（每一步都懂）

CSS变量--x和--y：这两个变量用来存储鼠标的实时位置，JS会把鼠标坐标转换成百分比后更新它们，让模糊区域的中心精准跟着鼠标动
mask属性（核心！解决硬边界的关键）：
我们用radial-gradient（径向渐变）做遮罩，逻辑是：
- 0-22%范围：完全显示模糊层（不透明）
- 22%-27%范围：从完全不透明渐变到半透明（过渡带，消除硬边）
- 27%-32%范围：从半透明渐变到完全透明（和原图自然衔接）
filter: blur(12px)：这里的数值可以自己调，越大模糊程度越高，根据你的需求调整即可
鼠标离开的处理：当鼠标移出图片时，模糊区域会移到看不见的地方，你可以直接删掉这部分代码，让它停在最后鼠标的位置