CSS鼠标发光效果：动态变量控制定位与阴影

本文深入解析了如何利用 CSS 自定义属性与 JavaScript 的 mousemove/touchmove 事件协同实现高性能、跨平台的鼠标/触摸点跟随发光动画：核心在于将实时坐标存为 `--mouse-x`/`--mouse-y` 变量，再通过 `calc(var(--mouse-x) - 50% * 1px)` 精准控制 `box-shadow` 偏移，既避免了直接操作 `style.boxShadow` 的性能瓶颈和维护难题，又比 `transform: translate()` 更真实地模拟光源发散效果；文章还直击移动端适配痛点（如 `touches[0]` 坐标获取、`passive: false` 设置、iOS 阴影模糊值限制），并破除常见误区——如盲目使用 `requestAnimationFrame` 反致拖尾、忽略单位乘法导致解析失败等，堪称一份兼顾原理深度与工程落地的前端动效实战指南。

如何用 mousemove 实时更新 box-shadow 实现鼠标跟随发光效果

核心是把鼠标坐标转成 CSS 自定义属性，再在元素上用 calc() 和 var() 动态算阴影偏移。别直接改 style.boxShadow，性能差、难维护。

• 监听 document.addEventListener('mousemove', ...)，取 e.clientX 和 e.clientY
• 用 document.documentElement.style.setProperty('--mouse-x', e.clientX + 'px') 同步写入根变量
• CSS 里写：box-shadow: calc(var(--mouse-x) - 50% * 1px) calc(var(--mouse-y) - 50% * 1px) 30px #00f3ff;（注意单位乘法防解析错误）
• 阴影中心要对准鼠标，所以减去元素自身宽高的一半；50% * 1px 是绕过 CSS 不支持 50% - var(--x) 的 hack

为什么 transform: translate() 不适合做发光跟随

发光是视觉层效果，不是位移。用 translate 移动整个元素会破坏布局流、触发重排，且阴影方向固定，无法模拟“光从鼠标点发散”的真实感。

• translate 改的是元素位置，box-shadow 偏移才是光的方向控制
• 如果同时用 translate + box-shadow，阴影会随元素一起动，失去“鼠标是光源”的语义
• 移动端 touch 事件坐标逻辑不同，translate 方案更难适配

requestAnimationFrame 节流不加反而更卡

直接在 mousemove 里设 CSS 变量其实足够快；加 requestAnimationFrame 反而引入一帧延迟，导致发光“拖尾”明显，尤其快速移动时。

• 现代浏览器对 setProperty 更新自定义属性做了优化，无需手动节流
• 只有当你在回调里做了复杂计算（比如多层阴影叠加、颜色插值）才考虑 raf
• 真要节流，用 setTimeout 配合 clearTimeout 比 raf 更可控，避免丢帧

移动端适配：touchmove 的坐标和触发时机差异

触摸屏没有持续的 mousemove，必须监听 touchmove 并取 e.touches[0]；而且默认会触发滚动，得加 { passive: false } 并调用 e.preventDefault()。

• touchmove 的 clientX/Y 在 e.touches[0] 下，不是 e 直接属性
• 别只监听 touchmove，保留 mousemove，用 'ontouchstart' in window 判断环境再绑定
• iOS Safari 对 box-shadow 渲染有性能限制，阴影模糊值超过 40px 可能掉帧，建议控制在 20px–30px

细节全在坐标怎么映射到阴影参数上——差一个负号、少乘个 1px、没处理 touches[0]，效果就断掉。

今天关于《CSS鼠标发光效果：动态变量控制定位与阴影》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！