核心是监听mousemove事件获取clientX/clientY，用throttle节流并归一化，通过document.documentElement.style.setProperty设置CSS变量，在CSS中用hsl()或color-mix()动态生成颜色，注意移动端需兼容touchmove及touch-action设置。
用 document.addEventListener('mousemove') 实时读取鼠标坐标
核心是监听 mousemove 事件，从事件对象里拿到 clientX 和 clientY，这两个值是相对于视口左上角的像素坐标。注意别用 pageX/pageY——滚动页面时它们会包含滚动偏移，导致颜色变化不跟手。
实操建议：
- 在
addEventListener回调里直接计算归一化值（比如除以window.innerWidth），避免每次重排时再算 - 加个
throttle（例如 16ms 节流）防止高频触发拖慢渲染，尤其低端设备上明显 - 如果只希望在某个容器内响应，把事件监听绑定到该元素而非
document，并用getBoundingClientRect()换算局部坐标
用 document.documentElement.style.setProperty() 更新 CSS 变量
CSS 变量必须定义在 :root 或 documentElement 上才能全局生效，JS 修改时得明确指向 document.documentElement，而不是随便一个 DOM 节点。
常见错误现象：改了变量但颜色没变——大概率是 setProperty 写成了 element.style.setProperty，或者变量名拼错（比如写成 --hue 但 CSS 里写的是 --h）。
实操建议：
- 变量命名保持语义清晰，如
--mouse-x、--mouse-y，方便后续在 CSS 里复用 - 设值时统一加单位（如
px）或不加（纯数值），CSS 里用calc()或clamp()做转换更安全 - 不要在循环里反复调用
setProperty更新多个变量——合并成一次style.cssText += '...'更高效（但注意覆盖风险）
在 CSS 中用 hsl() 或 color-mix() 动态生成颜色
单纯把 clientX 当作色相值最直观：hsl(var(--mouse-x), 80%, 60%)，但需先将像素值映射到 0–360 范围。更稳的方式是用 calc((var(--mouse-x) / 100) * 360) 配合 min()/max() 截断。
使用场景：
- 需要平滑过渡：用
transition: background-color 0.2s在伪类或背景元素上生效（注意hsl()支持过渡，而rgb()插值可能突兀） - 想叠加鼠标位置与主题色：用
color-mix(in srgb, var(--primary) 70%, hsl(var(--mouse-hue), 100%, 50%) 30%)（注意浏览器兼容性，Chrome 111+ 支持） - 避免黑/白极端色：在 JS 里对原始坐标做
Math.sin()或mod运算，比纯线性映射视觉更柔和
移动端适配时注意 touchmove 事件缺失问题
桌面端靠 mousemove 就够，但 iOS Safari 和部分安卓 WebView 默认不触发 touchmove（尤其在 body 上），且没有 clientX/clientY 的等效字段。
实操建议：
- 同时监听
touchmove和mousemove，并在touchmove回调中取touches[0].clientX - 给根元素加
touch-action: none，否则 iOS 会吞掉touchmove事件 - 真机调试时发现坐标异常？检查是否启用了「缩放」或「viewport width=device-width」未设置——这会导致
clientX与 CSS 像素不一致
真正难的不是读坐标或设变量，而是让颜色变化既响应及时又不刺眼。归一化方式、插值函数、硬件加速层级，任何一个环节没对齐，用户就会觉得“卡”或者“乱”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
