发光光标需box-shadow + position: fixed + transparent背景层，核心是独立div元素配合transform: translate(-50%, -50%)居中、pointer-events: none避免遮挡，JS用requestAnimationFrame节流更新clientX/Y坐标，并通过CSS变量动态控制颜色与强度。
发光光标需要哪些CSS属性组合
核心是 box-shadow + position: fixed + 透明背景层，不能只靠 text-shadow 或伪元素模拟——后者会随页面滚动偏移，且无法脱离文档流精准跟随。发光体必须是独立的 <div> 元素，绝对定位在视口坐标上，pointer-events: none 避免遮挡交互。
关键参数：
-
box-shadow: 0 0 20px 8px hsl(210, 80%, 60%)—— 模糊半径和扩展半径决定光晕大小，hsl 更易通过 JS 动态调色 -
transform: translate(-50%, -50%)确保中心对齐鼠标点 - 背景设为
background: transparent，否则会盖住下方内容
JS 怎么实时更新光标位置而不卡顿
监听 mousemove 事件本身没问题，但直接在事件回调里修改 style.left 和 style.top 会触发频繁重排。正确做法是用 requestAnimationFrame 节流，并缓存 DOM 引用。
实操要点：
- 用
event.clientX/event.clientY（不是pageX），确保坐标始终相对于视口 - 避免在事件中反复
document.querySelector，提前存好光标元素引用 - 不要用
setTimeout或debounce，会导致明显延迟；requestAnimationFrame是唯一能匹配屏幕刷新节奏的方式
let cursor = document.getElementById('glow-cursor');
let x = 0, y = 0;
document.addEventListener('mousemove', e => {
x = e.clientX;
y = e.clientY;
});
function animate() {
cursor.style.left = x + 'px';
cursor.style.top = y + 'px';
requestAnimationFrame(animate);
}
animate();
CSS 变量怎么和 JS 联动控制发光颜色与强度
把发光参数抽成 CSS 变量（如 --glow-color、--glow-blur），JS 只需更新 style.setProperty，无需拼接字符串或操作 class。这样既保持样式集中管理，又支持运行时动态切换。
注意点：
- CSS 中必须用
var(--glow-color)，不能写死值，否则变量无效 - JS 更新时要带单位，比如
element.style.setProperty('--glow-blur', '30px')，数字加px才生效 - 若想响应用户主题切换（如深色模式），可在
@media (prefers-color-scheme: dark)里覆盖变量值，JS 不用改逻辑
:root {
--glow-color: hsl(210, 80%, 60%);
--glow-blur: 20px;
}
#glow-cursor {
box-shadow: 0 0 var(--glow-blur) 6px var(--glow-color);
}
移动端适配时容易忽略的三个问题
触摸设备没有 mousemove，也不能靠 clientX/Y 获取精确位置。直接照搬桌面逻辑会导致移动端失效或错位。
立即学习“前端免费学习笔记（深入）”；
必须处理：
- 监听
touchmove并取e.touches[0].clientX/clientY，注意touches是类数组，得取第一个触点 - 禁用默认缩放：
<meta name="viewport" content="width=device-width, user-scalable=no">，否则双指缩放会让光标飞走 - 给光标元素加
will-change: transform，否则 iOS Safari 渲染闪烁严重
复杂点在于多点触控场景——你通常只希望一个光标，但 touchmove 可能带多个触点。别试图跟踪所有手指，取 touches[0] 就够用了，否则逻辑立刻变重。
