求助：自定义HTML/CSS/JS光标可移动但无法实现随动缩放

要实现光标移动时伴随缩放，核心是通过追踪鼠标移动速度动态调整缩放比例，结合CSS过渡实现平滑动画。以下是修改后的完整代码：

HTML（无需修改） #

<body>
    <div class="custom-cursor"></div>
</body>

CSS（微调过渡效果） #

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.15s ease-out; /* 缩短过渡时间，让缩放更跟随鼠标 */
    transform-origin: center;
}

JavaScript（核心修改） #

document.addEventListener("DOMContentLoaded", function() {
    const cursor = document.querySelector(".custom-cursor");
    let prevX = 0;
    let prevY = 0;

    document.addEventListener("mousemove", function(e) {
        const x = e.clientX;
        const y = e.clientY;
        // 计算鼠标移动的位移差
        const dx = x - prevX;
        const dy = y - prevY;
        // 计算移动速度（取绝对值，避免正负影响）
        const speed = Math.sqrt(dx * dx + dy * dy);
        // 将速度映射到缩放范围（1到1.5，可根据需求调整）
        const scale = Math.min(1 + speed * 0.02, 1.5);

        // 同时应用平移和缩放（注意顺序：先平移再缩放）
        cursor.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;

        // 更新上一次坐标
        prevX = x;
        prevY = y;
    });
});

关键说明： #

1. 速度计算：通过对比当前与上一次鼠标坐标的位移差，计算移动速度，速度越快缩放比例越大
2. 缩放映射：用Math.min限制最大缩放值，避免光标过大；speed * 0.02是缩放系数，可根据需求调整（值越大缩放越明显）
3. transform顺序：必须先写translate再写scale，否则缩放会改变光标的位置原点
4. 过渡时间：缩短CSS过渡时间到0.15s，让缩放动画更贴合鼠标移动的节奏

内容的提问来源于stack exchange，提问作者Usama Akram