如何用CSS/Javascript/jQuery实现灰度网站的光标跟随彩色显示效果？

你可以通过顶层遮罩动态镂空的方式实现需求，下面是两种可行的实现方式：

方案一：基于backdrop-filter的高效实现（推荐） #

利用backdrop-filter直接给页面内容上层叠加灰度效果，再通过clip-path在光标位置创建镂空区域，露出下方的彩色内容。

代码实现 #

HTML结构

将所有页面内容包裹在一个容器内：

<div class="page-container">
  <!-- 你的所有页面内容（图片、文字、组件等） -->
  <img src="demo-image.jpg" alt="示例图片">
  <h1>全局灰度，光标处显示彩色</h1>
</div>

CSS样式

.page-container {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* 灰度遮罩层 */
.page-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: grayscale(1);
  pointer-events: none; /* 不干扰页面交互 */
  transition: clip-path 0.1s ease; /* 平滑跟随光标 */
  clip-path: var(--clip-path, polygon(0 0, 100% 0, 100% 100%, 0 100%));
}

JavaScript逻辑

监听鼠标移动，实时更新遮罩的镂空位置：

const container = document.querySelector('.page-container');
const colorAreaRadius = 80; // 可调整彩色区域大小

document.addEventListener('mousemove', (e) => {
  const { clientX: x, clientY: y } = e;
  // 用clip-path的exclude语法，在全屏区域中排除光标处的圆形
  const clipPath = `polygon(0 0, 100% 0, 100% 100%, 0 100%) exclude circle(${colorAreaRadius}px at ${x}px ${y}px)`;
  container.style.setProperty('--clip-path', clipPath);
});

优势 #

• 无需复制页面内容，性能消耗低
• backdrop-filter直接作用于下方内容，无需单独处理元素的灰度效果

方案二：兼容旧浏览器的备选方案 #

如果需要兼容不支持backdrop-filter的浏览器，可以通过复制内容层的方式实现：

代码实现 #

HTML结构

<div class="page-wrapper">
  <!-- 底层彩色内容 -->
  <div class="content content-color">
    <!-- 原页面内容 -->
  </div>
  <!-- 顶层灰度内容 -->
  <div class="content content-gray">
    <!-- 和底层完全一致的内容 -->
  </div>
</div>

CSS样式

.page-wrapper {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content-gray {
  filter: grayscale(1);
  clip-path: var(--clip-path, polygon(0 0, 100% 0, 100% 100%, 0 100%));
}

JavaScript逻辑

和方案一完全相同，动态修改--clip-path变量，让顶层灰度层在光标位置镂空，露出下方彩色内容。

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