本文详解如何通过 JavaScript 动态控制 CSS transform 实现自定义光标在移动时短暂缩小、松开后恢复原尺寸的交互动效，兼容现代浏览器，代码轻量且可扩展。
本文详解如何通过 javascript 动态控制 css `transform` 实现自定义光标在移动时短暂缩小、松开后恢复原尺寸的交互动效，兼容现代浏览器，代码轻量且可扩展。
要让自定义光标不仅随鼠标移动，还能在移动过程中动态缩放（例如：移动时缩小为 80%，静止后平滑恢复至 100%），关键在于分离位移与缩放逻辑，并借助防抖+定时器实现“移动中缩放、静止后复位”的过渡效果。
原始代码仅执行 translate，未引入缩放变化；而目标效果本质是「运动态缩放 + 静态还原」。以下为优化后的完整实现：
✅ 核心逻辑说明
- 使用 mousemove 实时更新光标位置（translate）并立即应用缩小缩放（如 scale(0.8)）；
- 每次触发 mousemove 时清除上一个延时任务，避免重复缩放干扰；
- 设置 setTimeout 延迟 100ms 后还原为 scale(1.0)，若用户持续移动，则该延时不断被清除，缩放状态持续保持；
- CSS 中保留 transition: transform 0.2s ease-out，确保缩放还原过程具备平滑动画。
✅ 完整代码示例
HTML（确保 .custom-cursor 在 <body> 内最顶层）：
<body> <div class="custom-cursor"></div> <!-- 其他页面内容 --> </body>
CSS（关键：启用 transform-origin 并设置过渡）：
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;
}JavaScript（含防抖缩放控制）：
document.addEventListener("DOMContentLoaded", () => {
const cursor = document.querySelector(".custom-cursor");
let timeout = null;
document.addEventListener("mousemove", (e) => {
const x = e.clientX;
const y = e.clientY;
// 移动时：定位 + 缩小
cursor.style.transform = `translate(${x}px, ${y}px) scale(0.8)`;
// 清除旧定时器，重置静止状态
clearTimeout(timeout);
timeout = setTimeout(() => {
// 静止 100ms 后恢复原尺寸（带过渡动画）
cursor.style.transform = `translate(${x}px, ${y}px) scale(1.0)`;
}, 100);
});
});⚠️ 注意事项与优化建议
- 性能考量：避免在 mousemove 中执行复杂计算或 DOM 查询，本方案已将元素查询移至外层，符合最佳实践；
- 移动端适配：mousemove 在触摸设备上不触发，如需支持触控，应补充 touchmove 事件监听并统一处理坐标（e.touches[0].clientX/Y）；
- 缩放灵敏度调节：可通过调整 scale(0.8) 的数值（如 0.75 更明显）或延迟时间（100ms 可缩短为 80ms）微调响应感；
- 多光标/状态扩展：后续可结合 mouseenter/mouseleave 或 click 事件，为不同交互场景（悬停、点击）添加差异化缩放或颜色变化。
该方案已在 redlight.dev/careers/ 类似项目中验证有效，兼顾简洁性与表现力，是打造高品质自定义光标体验的可靠基础。
