自定义光标Hover元素时平滑动画实现方案咨询

你的问题出在这几个核心点：

• .cursor 的 transition 属性被设为空，没有开启过渡动画
• hover时只设置了 scale(6)，覆盖了原本的 translate(-50%, -50%)，导致光标位置跳变
• 未针对需要变化的属性（transform、background）配置过渡规则

按下面的修改就能实现平滑放大的动画效果：

修改后的完整代码 #

<style>
.cursor {
    content: " ";
    position: absolute;
    background: #ffffff;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    user-select: none;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 9999;
    /* 给transform和background添加过渡，0.3s时长+ease缓动让动画更自然 */
    transition: transform 0.3s ease, background 0.3s ease;
}
</style>

<div class="cursor"><span id="myspan"></span></div>

<script>
var cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.pageX + 'px';
    cursor.style.top = e.pageY + 'px';
});
</script>

<div class="div-33">
    <a href="" class="a1" style="cursor:none">
        <span class="span-11 cursorHover div-34">
            LET’S GET SOMETHIN’
            <br />
            COOKIN’.
            <img src="imgs/im/Vector.png" class="arrow mt-4" />
        </span>
    </a>
</div>

<script>
var cursor3 = document.querySelector('.cursorHover');
var span = document.getElementById("myspan");
// 提前创建文本节点，避免重复创建导致DOM报错
var txt = document.createTextNode("Say hi!");

cursor3.addEventListener('mouseenter', () => {
    var element = document.querySelector('.cursor');
    // 保留translate定位，只修改scale值，避免光标偏移
    element.style.transform = 'translate(-50%, -50%) scale(6)';
    element.style.background = '#FF6E1D';
    // 先判断节点是否已存在，再添加
    if (!span.contains(txt)) {
        span.appendChild(txt);
    }
});

cursor3.addEventListener('mouseleave', () => {
    var element = document.querySelector('.cursor');
    // 明确恢复初始transform和背景色，比清空样式更可靠
    element.style.transform = 'translate(-50%, -50%) scale(0.9)';
    element.style.background = '#ffffff';
    // 判断节点存在再移除，避免报错
    if (span.contains(txt)) {
        span.removeChild(txt);
    }
})
</script>

关键修改说明 #

1. 开启过渡动画：通过transition属性指定transform和background的过渡规则，让变化过程平滑
2. 保留定位属性：hover时不能只写scale，必须带上原本的translate，否则光标会偏离鼠标位置
3. 优化DOM操作：提前创建文本节点，添加/移除前做存在性判断，避免多次hover导致的报错
4. 明确初始值恢复：mouseleave时直接指定初始样式，比清空style属性更稳定

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