如何使用CSS实现鼠标光标阴影效果？

你现在的代码会显示一个跟随鼠标的小方块，且阴影是四周扩散的。要做到只在光标移动的后方显示阴影，按照以下步骤修改即可：

核心调整点 #

1. 隐藏原本的方块（只保留阴影效果，不需要显示小方块本身）
2. 跟踪鼠标移动方向，动态设置阴影的偏移方向，让阴影始终出现在鼠标移动的反方向

修改后的完整代码 #

CSS #

#shadow {
    width: 0;
    height: 0;
    position: absolute;
    pointer-events: none;
    /* 初始阴影默认值，可根据需求调整模糊度 */
    box-shadow: -5px -5px 2rem var(--beton);
}

JavaScript #

// 记录上一次鼠标的位置，用来计算移动方向
let lastMouseX = 0;
let lastMouseY = 0;

const updateShadow = function(event) {
    const shadow = document.querySelector("#shadow");
    // 计算鼠标移动的偏移量
    const moveX = event.pageX - lastMouseX;
    const moveY = event.pageY - lastMouseY;

    // 阴影偏移量：和鼠标移动方向相反
    let shadowX = 0;
    let shadowY = 0;
    // 控制阴影离鼠标的距离，可自定义
    const offset = 5;

    // 判断是水平移动还是垂直移动为主
    if (Math.abs(moveX) > Math.abs(moveY)) {
        // 水平移动：鼠标往右移，阴影在左；往左移，阴影在右
        shadowX = moveX > 0 ? -offset : offset;
    } else {
        // 垂直移动：鼠标往下移，阴影在上；往上移，阴影在下
        shadowY = moveY > 0 ? -offset : offset;
    }

    // 设置阴影样式
    shadow.style.boxShadow = `${shadowX}px ${shadowY}px 2rem var(--beton)`;
    // 把阴影定位到当前鼠标位置
    shadow.style.top = `${event.pageY}px`;
    shadow.style.left = `${event.pageX}px`;

    // 更新上一次鼠标位置
    lastMouseX = event.pageX;
    lastMouseY = event.pageY;
}

document.body.addEventListener("mousemove", updateShadow);

// 初始化鼠标位置，避免页面加载后第一次移动异常
document.addEventListener("DOMContentLoaded", () => {
    const initPos = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
    lastMouseX = initPos.x;
    lastMouseY = initPos.y;
    const shadow = document.querySelector("#shadow");
    shadow.style.top = `${initPos.y}px`;
    shadow.style.left = `${initPos.x}px`;
});

HTML（无需改动） #

<div id="shadow"></div>

额外说明 #

• 把方块宽高设为0并移除background-color，就只会显示阴影，不会看到原本的小方块
• offset变量控制阴影与鼠标的距离，2rem是阴影的模糊范围，都可以根据视觉需求调整
• 如果想要阴影更自然，可以增加阴影的扩散范围，或者调整颜色的透明度

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