本文详细介绍了如何利用css的`clip-path`和`backdrop-filter`属性，结合javascript追踪鼠标位置，实现一个独特的视觉效果：整个网页呈现灰度或低饱和度，而一个跟随鼠标移动的区域则实时显示下方内容的原始色彩。该教程将深入探讨各技术细节，并提供完整的代码示例。
概述：动态光标颜色透视效果
在网页设计中，有时我们需要创造引人注目的交互式视觉效果。其中一种是让整个页面呈现一种统一的视觉风格（如灰度），但同时提供一个动态的“窗口”，当用户鼠标移动到某个区域时，该区域能“揭示”下方内容的原始色彩。这种效果可以增强用户体验，引导用户关注特定区域，或纯粹用于艺术表达。
实现这一效果的关键在于巧妙地结合CSS的现代特性——backdrop-filter和clip-path，并辅以JavaScript来实时响应用户的鼠标动作。
核心技术解析
1. backdrop-filter：背景滤镜
backdrop-filter CSS 属性允许你对元素后面的区域应用图形效果（如模糊、颜色偏移、灰度等）。这意味着，如果一个元素是半透明的，或者其后面有其他内容，backdrop-filter就会对这些“背景”内容应用滤镜效果，而不是对元素本身。
在本教程中，我们将创建一个覆盖整个页面的元素，并对其应用backdrop-filter: grayscale(1)。这样，整个页面（除了这个元素本身）都会变成灰度。
立即学习“前端免费学习笔记（深入）”；
2. clip-path：裁剪路径
clip-path CSS 属性使用裁剪路径来决定元素哪些部分可见，哪些部分隐藏。裁剪路径可以是基本形状（如圆形、矩形、多边形）或SVG路径。它允许我们精确地定义一个元素的可见区域。
为了创建“颜色透视窗口”，我们将利用clip-path在一个覆盖层上创建一个“洞”。这个“洞”将是唯一不被backdrop-filter影响的区域，从而显示下方内容的原始色彩。
3. JavaScript：实时追踪与定位
为了让“透视窗口”跟随鼠标移动，我们需要使用JavaScript来监听鼠标的mousemove事件，并获取鼠标的实时坐标。然后，这些坐标将被用来动态更新CSS变量，从而调整覆盖层的位置，确保clip-path创建的“洞”始终位于鼠标下方。
实现步骤与代码示例
我们将通过HTML结构、CSS样式和JavaScript逻辑三部分来构建这个效果。
HTML 结构
首先，在
内添加一个容器，其中包含一个用于实现效果的div。
- .cursorContainer：这个容器的目的是为了固定在视口上，并防止内部的.cursor元素（它会非常大）导致页面滚动或干扰其他交互。pointer-events: none是关键，它使得鼠标事件能穿透这个容器，作用于其下方的页面内容。
- .cursor：这是实际应用backdrop-filter和clip-path的元素。它将是一个非常大的div，覆盖整个页面。
CSS 样式
CSS部分是实现视觉效果的核心。我们将定义.cursorContainer和.cursor的样式，并利用CSS变量来动态调整位置。
/* 示例背景，用于演示效果，与解决方案本身无关 */
body {
min-height: 100vh; /* 确保body有足够高度 */
background-image: linear-gradient(45deg, #ff002f 10%, #2bcc33 10%, #2bcc33 20%, #0c12cc 20%, #0c12cc 30%, #0ddec6 30%, #0ddec6 40%, #d0db00 40%, #d0db00 50%, #ff002f 50%, #ff002f 60%, #2bcc33 60%, #2bcc33 70%, #0c12cc 70%, #0c12cc 80%, #0ddec6 80%, #0ddec6 90%, #d0db00 90%, #d0db00 100%);
background-size: 141.42px 141.42px;
margin: 0; /* 移除默认外边距 */
}
/* 容器覆盖整个页面，防止遮罩干扰点击和滚动 */
.cursorContainer {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden; /* 隐藏超出视口的 .cursor 部分 */
pointer-events: none; /* 允许鼠标事件穿透 */
z-index: 9999; /* 确保在最上层 */
}
.cursor {
/* 以下CSS变量由JS设置，用于保持透视框在光标位置 */
--x: 0px; /* 光标X坐标 */
--y: 0px; /* 光标Y坐标 */
/* 透视框宽度和高度的一半 */
--boxX: 60px;
--boxY: 40px;
/* 根据boxX/boxY计算clip-path的边界 */
--boxUpperX: calc(50% + var(--boxX)); /* 透视框右边界（相对于.cursor元素中心） */
--boxLowerX: calc(50% - var(--boxX)); /* 透视框左边界（相对于.cursor元素中心） */
--boxUpperY: calc(50% + var(--boxY)); /* 透视框下边界（相对于.cursor元素中心） */
--boxLowerY: calc(50% - var(--boxY)); /* 透视框上边界（相对于.cursor元素中心） */
position: fixed;
height: 200vh; /* 足够大，确保覆盖整个视口的两倍 */
width: 200vw; /* 足够大，确保覆盖整个视口的两倍 */
/* 通过JS设置的--x/--y来调整元素位置，使透视框中心跟随光标 */
left: calc(-50vw + var(--x)); /* 调整left使光标位于元素中心 */
top: calc(-50vh + var(--y)); /* 调整top使光标位于元素中心 */
/* 对此元素后方的网页内容应用灰度滤镜 */
backdrop-filter: grayscale(1);
/* 使用clip-path创建一个矩形孔洞，滤镜只应用于孔洞外部 */
/* 这个多边形定义了一个大矩形，然后在其中心挖了一个矩形孔洞 */
clip-path: polygon(
0% 0%, /* 左上角 */
0% 100%, /* 左下角 */
var(--boxLowerX) 100%, /* 左侧边缘，向下延伸至底部 */
var(--boxLowerX) var(--boxUpperY), /* 左侧边缘，向上至透视框左下角 */
var(--boxUpperX) var(--boxUpperY), /* 穿过透视框底部，至右下角 */
var(--boxUpperX) var(--boxLowerY), /* 右侧边缘，向上至透视框右上角 */
var(--boxLowerX) var(--boxLowerY), /* 穿过透视框顶部，至左上角 */
var(--boxLowerX) 100%, /* 左侧边缘，向下至底部 (此点与 var(--boxLowerX) 100% 重复，可省略，但保留以清晰表达路径) */
100% 100%, /* 右下角 */
100% 0% /* 右上角 */
);
}CSS 关键点解释：
- .cursor 尺寸与定位: width: 200vw; height: 200vh; 使.cursor元素远大于视口，确保它能覆盖整个页面，无论光标位于何处。left: calc(-50vw + var(--x)); 和 top: calc(-50vh + var(--y)); 是关键。它们将这个巨大的.cursor元素相对于光标位置进行偏移。例如，如果光标在视口中心（--x = 50vw, --y = 50vh），那么left和top都将是0，意味着.cursor元素的左上角与视口左上角对齐。这样，.cursor元素的中心（100vw, 100vh）就始终与光标对齐。
-
clip-path 挖孔逻辑: clip-path的polygon函数定义了一系列坐标点来构建一个形状。这里的polygon实际上定义了一个大的矩形，然后在其内部挖了一个矩形孔洞。
- 外部矩形由 0% 0%, 0% 100%, 100% 100%, 100% 0% 定义，覆盖整个.cursor元素。
- 内部的孔洞由 var(--boxLowerX) var(--boxLowerY) (左上), var(--boxUpperX) var(--boxLowerY) (右上), var(--boxUpperX) var(--boxUpperY) (右下), var(--boxLowerX) var(--boxUpperY) (左下) 这些点构成。
- 通过巧妙地连接这些点，clip-path创建了一个“甜甜圈”形状，其中滤镜作用于“甜甜圈”的实体部分，而中心孔洞则保持透明，从而显示下方原始内容。
JavaScript 逻辑
JavaScript负责监听鼠标移动事件，并更新CSS变量。
// 获取 .cursor 元素
const cursor = document.querySelector(".cursor");
// 监听鼠标移动事件
addEventListener('mousemove', e => {
// 将鼠标的当前X/Y坐标值赋给CSS变量 --x 和 --y
// pageX/pageY 提供相对于整个文档的坐标
cursor.style.setProperty("--x", `${e.pageX}px`);
cursor.style.setProperty("--y", `${e.pageY}px`);
});JavaScript 关键点解释：
- addEventListener('mousemove', e => { ... });：当鼠标在文档上移动时，此事件监听器会被触发。
- e.pageX 和 e.pageY：这些属性提供了鼠标指针相对于整个文档的水平和垂直坐标（以像素为单位）。
- cursor.style.setProperty("--x",${e.pageX}px);：这行代码将鼠标的X坐标值赋给名为--x的CSS自定义属性。CSS中calc()函数会使用这些值来计算.cursor元素的位置。
完整示例代码
将上述HTML、CSS和JavaScript代码组合起来，即可实现动态光标颜色透视效果。
动态光标颜色透视效果
欢迎体验动态颜色透视效果
将鼠标移动到页面上，观察光标下方区域如何显示原始色彩。
这是一个使用 `backdrop-filter` 和 `clip-path` 实现的现代CSS效果。
请注意浏览器兼容性。
注意事项
- 浏览器兼容性： backdrop-filter 和 clip-path 都是相对较新的CSS属性。在使用之前，请务必检查目标用户的浏览器兼容性要求。您可以在 caniuse.com 上查询它们的兼容性信息。对于不支持这些属性的浏览器，效果将无法显示，页面会保持原始状态（无灰度，无透视）。
- 性能： backdrop-filter 可能会对性能产生一定影响，尤其是在复杂的背景或动画场景中。虽然对于简单的灰度滤镜通常影响不大，但在生产环境中仍需进行测试。
- 替代方案： 如果浏览器兼容性是一个严格的限制，或者需要更复杂的蒙版效果，可以考虑使用SVG滤镜和蒙版，或Canvas API来实现类似效果，但这通常会增加实现的复杂性。
- pointer-events: none 的重要性： .cursorContainer 上的 pointer-events: none 至关重要，它确保了用户可以正常与下方的页面内容进行交互，而不会被覆盖层阻挡。
总结
通过结合CSS的backdrop-filter和clip-path属性，并利用JavaScript进行鼠标位置追踪，我们可以创造出一种引人入胜的动态光标颜色透视效果。这种技术展示了现代CSS的强大能力，允许开发者在不依赖复杂图像处理软件的情况下，直接在网页上实现高级的视觉蒙版和滤镜效果。尽管需要注意浏览器兼容性，但对于支持现代Web标准的浏览器，这无疑是一种优雅且高性能的实现方式。
