使用CSS变量和JavaScript实现鼠标跟随渐变

实现鼠标跟随渐变效果的详细过程：

1. HTML 结构

我们在 HTML 中创建了一个 <div> 元素，用于展示渐变效果。这个元素的 ID 是 gradient-box，方便在 JavaScript 中进行操作。

2. CSS 样式

CSS 变量 ：在 :root 中定义了两个 CSS 变量 --mouse-x 和 --mouse-y，用于存储鼠标位置的百分比值。这些变量会被用于控制渐变的中心位置。
渐变背景 ：div 元素的背景设置为径向渐变（radial-gradient），其中心位置由 --mouse-x 和 --mouse-y 控制。初始值为 50%，即居中显示。

3. JavaScript 逻辑

事件监听 ：为 div 元素添加 mousemove 事件监听器。当鼠标在 div 上移动时，会触发 updateMousePosition 函数。
计算鼠标位置 ：
- 使用 getBoundingClientRect() 获取 div 元素的边界信息。
- 计算鼠标在 div 内的相对位置，并将其转换为百分比值。
更新 CSS 变量 ：
- 使用 style.setProperty() 方法，将计算得到的百分比值更新到 --mouse-x 和 --mouse-y 变量上。
- 由于这些变量直接影响 div 的背景渐变，因此每次鼠标移动时，渐变的中心位置都会实时更新。

4. 整体效果

通过上述步骤，div 元素的背景渐变会根据鼠标在其上的位置动态变化，形成一个跟随鼠标移动的视觉效果。这种实现方式利用了 CSS 变量的动态特性和 JavaScript 的事件处理能力，使得效果流畅且易于维护。

代码如下

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        :root {
            --mouse-x: 50%;
            --mouse-y: 50%;
        }
        div {
            width: 1200px;
            height: 1200px;
            cursor: pointer;
            border: 1px solid #6794ee;
            background: radial-gradient(circle at var(--mouse-x) var(--mouse-y),
            rgba(10, 34, 243, 0.5),
            rgba(255, 0, 0, 0.2));
        }
    </style>
</head>
<body>
    <div id="gradient-box">
    </div>

    <script>
        // 修正函数定义
        function updateMousePosition(event) {
            const rect = event.currentTarget.getBoundingClientRect();
            const mouseX = ((event.clientX - rect.left) / rect.width) * 100;
            const mouseY = ((event.clientY - rect.top) / rect.height) * 100;
            document.documentElement.style.setProperty('--mouse-x', `${mouseX}%`);
            document.documentElement.style.setProperty('--mouse-y', `${mouseY}%`);
        }

        // 添加事件监听
        const gradientBox = document.getElementById('gradient-box');
        gradientBox.addEventListener('mousemove', updateMousePosition);
    </script>
</body>
</html>