如何在CSS中利用变量优雅实现鼠标跟随光晕效果-css教程-PHP中文网

radial-gradient光晕需css变量带px单位，坐标须经容器rect转换并clamp边界，移动端用touchmove[0]加passive，推荐伪元素+rgba渐变+小数坐标提升平滑度。

如何在css中利用变量优雅实现鼠标跟随光晕效果

radial-gradient + CSS 变量必须用像素单位，不能混用 % 和 px

光晕中心定位靠的是 radial-gradient(circle at var(--mouse-x) var(--mouse-y), ...)，而 CSS 变量本身无单位，所以 --mouse-x 的值必须带 px（比如 '123px'），写成 '50%' 或漏掉单位都会导致语法错误或错位。

常见错误现象：光晕固定在左上角不动——多半是 JS 写入时没加单位，或用了 % 但容器宽高未固定，导致百分比计算失真。

推荐统一用像素：JS 中用 e.clientX - rect.left + 'px' 计算相对坐标
如果要用百分比（比如适配缩放/响应式），变量值就得是 '42%'，且所有相关背景、遮罩的尺寸也得用 % 单位对齐
calc() 里可以混合单位（如 calc(var(--mouse-x) - 50px)），但变量自身不能既存数字又期待浏览器自动补单位

监听 mousemove 时必须做容器坐标转换，否则滚动/缩放下光晕漂移

直接用 e.clientX/e.clientY 得到的是视口坐标，一旦容器有 scrollLeft/scrollTop 或 transform: scale()，光晕就会偏移。

正确做法是每次事件触发时，先调用 container.getBoundingClientRect() 获取容器左上角相对于视口的位置，再做减法：

const rect = container.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;

若容器支持缩放（如 scale(1.2)），还要除以缩放系数：x /= window.getComputedStyle(container).transformMatrix?.a || 1（简化起见，可用 container.style.transform 解析，或直接监听 resize + scroll 重算）。

别把变量写进 :root，否则全站生效；应绑定到目标容器的 style 上：container.style.setProperty('--mouse-x', x + 'px')
移动端需额外监听 touchmove，取 e.touches[0].clientX，而非 changedTouches
高频移动下可包一层 requestAnimationFrame 避免丢帧，但不是必须——多数场景直接更新即可

光晕边缘生硬或闪烁？关键在渐变参数和 will-change

用 radial-gradient 做光晕时，停靠点设置不合理会导致衰减过快（硬边）或过渡模糊（发虚）。典型写法是：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

background: radial-gradient(
  circle at var(--mouse-x) var(--mouse-y),
  rgba(255,255,255,0.3) 0%,
  transparent 60%
);

其中 60% 是半径比例，数值越大光晕越扩散；若想更柔和，可加一个中间透明过渡层：

rgba(255,255,255,0.15) 40%, transparent 70%

容易被忽略的是渲染精度问题：JS 写入整数坐标（如 '123px'）时，浏览器可能跳帧；传小数（'123.42px'）并配合 will-change: background-position 能显著改善平滑度。

避免在 body 或大容器上直接设该背景——重绘区域过大，建议用伪元素 ::before 层叠
别用 opacity 控制光晕强度，它会透出子元素；改用 rgba() 的 alpha 值更安全
如果容器用了 backdrop-filter，光晕背景仍正常作用于滤镜后画面，无需额外处理

移动端 touchmove 兼容必须用 touches[0]，且 passive 不可少

iOS Safari 和安卓 Chrome 对 touchmove 默认不触发，且多点触控时只有 touches[0] 是主指针坐标。用 changedTouches[0] 会导致首次触摸无响应、后续拖动跳变。

监听时务必加 { passive: true } 提升滚动性能，否则 iOS 下页面可能卡顿：

container.addEventListener('touchmove', e => {
  const t = e.touches[0];
  container.style.setProperty('--mouse-x', (t.clientX - rect.left) + 'px');
}, { passive: true });

同时监听 mousemove 和 touchmove 是必须的，但别合并事件处理器——它们的坐标获取方式不同，强行共用逻辑易出错。