本文详细介绍了如何利用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逻辑三部分来构建这个效果。
Mootion
Mootion是一个革命性的3D动画创作平台，利用AI技术来简化和加速3D动画的制作过程。
177 查看详情
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代码组合起来，即可实现动态光标颜色透视效果。
动态光标颜色透视效果 body { min-height: 100vh; 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; font-family: sans-serif; color: #333; display: flex; justify-content: center; align-items: center; font-size: 2em; text-align: center; padding: 20px; box-sizing: border-box; } .content { background-color: rgba(255, 255, 255, 0.8); padding: 40px; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); max-width: 800px; } .cursorContainer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; pointer-events: none; z-index: 9999; } .cursor { --x: 0px; --y: 0px; --boxX: 60px; --boxY: 40px; --boxUpperX: calc(50% + var(--boxX)); --boxLowerX: calc(50% - var(--boxX)); --boxUpperY: calc(50% + var(--boxY)); --boxLowerY: calc(50% - var(--boxY)); position: fixed; height: 200vh; width: 200vw; left: calc(-50vw + var(--x)); top: calc(-50vh + var(--y)); backdrop-filter: grayscale(1); 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%, /* 这个点是多余的，但保留以匹配原始示例逻辑 */ 100% 100%, 100% 0% ); }欢迎体验动态颜色透视效果
将鼠标移动到页面上，观察光标下方区域如何显示原始色彩。
这是一个使用 `backdrop-filter` 和 `clip-path` 实现的现代CSS效果。
请注意浏览器兼容性。
const cursor = document.querySelector(".cursor"); addEventListener('mousemove', e => { cursor.style.setProperty("--x", `${e.pageX}px`); cursor.style.setProperty("--y", `${e.pageY}px`); });
注意事项
浏览器兼容性： 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标准的浏览器，这无疑是一种优雅且高性能的实现方式。
以上就是揭秘CSS与JS实现动态光标颜色透视效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/906722.html
微信扫一扫 
支付宝扫一扫 
