鼠标触发CSS渐变，JS动态变量实现

• 用 element.addEventListener('mousemove', e => { ... })，别用 document 全局监听（除非真要全屏响应）
• 计算百分比时记得 Math.max(0, Math.min(100, ...)) 防止鼠标移出区域导致负值或超 100%
• 加 { passive: true } 提升滚动流畅度，但注意：如果后续要阻止默认行为（一般不需要），就不能设 passive

CSS 里怎么用这两个变量做背景过渡

变量本身不触发过渡，得靠 background 属性的可动画性。CSS 渐变（radial-gradient 或 linear-gradient）支持数值插值，所以把 --mouse-x 当作位置参数塞进去就行。

容易踩的坑是写成 background: radial-gradient(circle at var(--mouse-x) var(--mouse-y), ...) —— 这样无效，因为 at 后面不接受两个独立变量拼接。得用一个合成变量，或者用 calc() 拼字符串（但 calc 不支持变量拼接）。

• 推荐方案：JS 里直接设置一个合成变量，比如 style.setProperty('--mouse-pos', `${x}% ${y}%`)，CSS 里写 radial-gradient(circle at var(--mouse-pos), ...)
• 如果要用双变量，CSS 得写成 radial-gradient(circle at calc(var(--mouse-x) * 1vw) calc(var(--mouse-y) * 1vh), ...)，但单位要对齐，vw/vh 比 % 更稳
• transition: background 0.3s ease 必须写在同一个选择器里，且不能被 !important 或更高优先级规则覆盖

为什么鼠标一动就卡，过渡不顺

不是 JS 慢，是浏览器在每帧都重算渐变+重绘整个背景层。尤其当容器大、设备分辨率高时，GPU 负担明显。

性能关键点不在“设变量”，而在“怎么用变量”。用 radial-gradient 比 linear-gradient 更吃资源；用 rgba() 半透明色比纯色更耗；背景图叠加也会雪上加霜。

• 把 will-change: background 加到元素上，提前告诉浏览器这个属性会变（但别滥用，只加在真正需要的元素）
• 过渡时间别低于 0.2s，太快反而让浏览器丢帧
• 移动端慎用——触摸事件 touchmove 触发频率低，且坐标需从 touches[0] 取，clientX/Y 在某些安卓 WebView 里不准

兼容性要注意哪些硬伤

CSS 自定义属性（--xxx）IE 完全不支持，Edge 15+ 才行；radial-gradient 在旧 Safari 需要 -webkit- 前缀；transition 对 background 的支持，Safari 12.1 之前有 bug，可能跳变。

最现实的底线是：如果你的项目还要支持 IE 或老 iOS，这条路基本走不通，得降级为 canvas 绘制或固定几个热点位切换 class。

• 检查是否启用了 prefers-reduced-motion，用户开了“减少动画”时，直接关掉 transition 或设为 0.01s
• Firefox 对 background 中含 var() 的 transition 支持稍晚，100+ 版本才稳定
• 不要依赖 background-position + transition 模拟——它只能平移，做不出以鼠标为中心的扩散效果

事情说清了就结束

到这里，我们也就讲完了《鼠标触发CSS渐变，JS动态变量实现》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！