本文介绍如何通过 JavaScript 动态控制自定义光标的位移与缩放，利用 mousemove 事件配合防抖式 scale 变换，实现在悬停或快速移动时自动缩小、静止后恢复原尺寸的视觉反馈效果。
本文介绍如何通过 javascript 动态控制自定义光标的位移与缩放，利用 `mousemove` 事件配合防抖式 `scale` 变换，实现在悬停或快速移动时自动缩小、静止后恢复原尺寸的视觉反馈效果。
要让自定义光标不仅跟随鼠标移动，还能在移动过程中动态缩放（例如：移动时缩小为 80%，静止后平滑恢复至 100%），关键在于分离位移与缩放逻辑，并引入节流/防抖机制，避免频繁触发导致的闪烁或卡顿。
以下是一个稳定、可复用的实现方案：
✅ 核心思路
- 每次 mousemove 触发时，立即将光标定位到当前坐标并应用缩小缩放（如 scale(0.8)）；
- 同时清除上一次的延迟恢复任务，并设置新的定时器（如 100ms 后恢复 scale(1)）；
- 利用 CSS 的 transition: transform 0.2s ease-out 实现平滑缩放过渡。
✅ 完整代码示例
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)`;
}, 100);
});
});对应的 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-origin: center; /* 保证缩放以中心为基准 */
z-index: 9999; /* 确保始终显示在最上层 */
}HTML 结构保持简洁：
<body>
<div class="custom-cursor"></div>
<!-- 其他页面内容 -->
</body>⚠️ 注意事项
- 性能优化：mousemove 事件高频触发，上述 setTimeout + clearTimeout 是轻量级防抖方案；如需更高性能，可考虑 requestAnimationFrame 替代（适用于更复杂动画场景）。
- 兼容性：transform 和 transition 在现代浏览器中支持良好，无需额外前缀。
- 响应式适配：若页面存在滚动或视口缩放（如移动端），建议改用 e.clientX / window.innerWidth 归一化坐标，或结合 getBoundingClientRect() 进行更精准定位。
- 交互增强：可进一步扩展逻辑——例如在 mouseenter 元素时触发不同缩放（如按钮 hover 缩放至 0.6），提升用户体验层次。
通过该方案，你的光标将具备「移动收缩 → 静止复原」的细腻动效，显著提升网站的交互质感与专业度。
