本文详解如何通过 javascript 动态控制自定义光标（custom cursor）在鼠标移动过程中实时缩放，解决“光标只平移不缩放”的常见问题，适配现代网站交互需求。
本文详解如何通过 javascript 动态控制自定义光标（custom cursor）在鼠标移动过程中实时缩放，解决“光标只平移不缩放”的常见问题，适配现代网站交互需求。
要让自定义光标不仅跟随鼠标移动，还能在交互中动态缩放（例如悬停时缩小、静止时恢复原尺寸），关键在于解耦位移与缩放逻辑，并引入防抖式状态切换机制。原始代码仅执行 translate，未触发 scale 变化；而理想效果应模拟真实指针的“轻触反馈”——即鼠标持续移动时轻微缩小，暂停时平滑还原。
以下是优化后的完整实现方案：
✅ 核心思路
- 每次 mousemove 触发时，立即应用缩放（如 scale(0.8)）并重置计时器；
- 使用 setTimeout 延迟还原为 scale(1)，若在延迟期内再次移动，则清除前序定时器（防抖）；
- 配合 CSS 的 transition: transform 0.2s ease-out 实现平滑过渡。
✅ 优化后的 JavaScript
document.addEventListener("DOMContentLoaded", function() {
const cursor = document.querySelector(".custom-cursor");
let timeout = null;
document.addEventListener("mousemove", function(e) {
const x = e.clientX;
const y = e.clientY;
// 立即缩放 + 平移
cursor.style.transform = `translate(${x}px, ${y}px) scale(0.8)`;
// 清除上一次延迟，避免重复执行
clearTimeout(timeout);
timeout = setTimeout(() => {
cursor.style.transform = `translate(${x}px, ${y}px) scale(1)`;
}, 150); // 150ms 后恢复原尺寸（可根据手感微调）
});
});✅ 对应 CSS（保持不变，但需确保 transition 生效）
body {
cursor: none;
margin: 0;
overflow: hidden;
}
.custom-cursor {
position: fixed;
width: 20px;
height: 20px;
background-color: #ff0000;
border-radius: 50%;
pointer-events: none;
transition: transform 0.2s ease-out; /* 必须包含 transform */
transform-origin: center;
z-index: 9999; /* 确保覆盖所有内容 */
}⚠️ 注意事项与进阶建议
- 性能优化：高频 mousemove 事件可能影响性能，可考虑使用 requestAnimationFrame 替代 setTimeout 实现更流畅的帧同步缩放（适用于高要求场景）；
- 兼容性：transform 在现代浏览器中支持良好，但若需支持 IE，需添加 -ms-transform 等前缀；
- 交互增强：可结合 mouseenter/mouseleave 为按钮等元素添加额外缩放响应（如 hover 时缩至 0.6），提升 UX 层次感；
- 视觉调试：开发阶段建议临时添加 box-shadow: 0 0 8px rgba(255,0,0,0.5) 到 .custom-cursor，便于观察光标位置与缩放变化。
通过上述方案，你的自定义光标将具备自然、响应式的缩放行为，显著提升网站的专业感与交互沉浸度——正如 redlight.dev/careers/ 所呈现的细腻动效。
