实现鼠标跟随渐变效果的详细过程：
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 的事件处理能力，使得效果流畅且易于维护。
代码如下
<!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>
)
