揭秘CSS与JS实现动态光标颜色透视效果-html教程-PHP中文网

揭秘CSS与JS实现动态光标颜色透视效果

本文详细介绍了如何利用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逻辑三部分来构建这个效果。

MakeSong

AI音乐生成，生成高质量音乐，仅需30秒的时间

145

查看详情

HTML 结构

首先，在<body>内添加一个容器，其中包含一个用于实现效果的div。

<div class="cursorContainer">
  <div class="cursor"></div>
</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代码组合起来，即可实现动态光标颜色透视效果。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>动态光标颜色透视效果</title>
    <style>
        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%
            );
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>欢迎体验动态颜色透视效果</h1>
        <p>将鼠标移动到页面上，观察光标下方区域如何显示原始色彩。</p>
        <p>这是一个使用 `backdrop-filter` 和 `clip-path` 实现的现代CSS效果。</p>
        <p>请注意浏览器兼容性。</p>
    </div>

    <div class="cursorContainer">
        <div class="cursor"></div>
    </div>

    <script>
        const cursor = document.querySelector(".cursor");
        addEventListener('mousemove', e => {
            cursor.style.setProperty("--x", `${e.pageX}px`);
            cursor.style.setProperty("--y", `${e.pageY}px`);
        });
    </script>
</body>
</html>

登录后复制

注意事项

浏览器兼容性： 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实现动态光标颜色透视效果的详细内容，更多请关注php中文网其它相关文章！