如何让CSS+HTML+JS实现的聚光灯效果初始居中于页面？

我用CSS、HTML和JavaScript实现了一个聚光灯效果，页面刷新或首次打开时，聚光灯不在页面中心，而是显示在右下角。想让它每次刷新或打开页面时都处于页面中心，请问可行吗？

原代码展示 #

原CSS代码 #

.spotlight {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial gradient(circle, transparent 160px, rgba(0, 0, 0, 0)
    200px);
}

原JavaScript代码 #

window.addEventListener("DOMContentLoaded", () => {
    const spotlight = document.querySelector('.spotlight');
    let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
    window.addEventListener('mousemove', e => updateSpotlight(e));
    function updateSpotlight(e) {
        spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
    }
});

解决方案 #

当然可行，只需在DOM加载完成后手动调用一次聚光灯更新函数，同时修正代码里的几处语法小问题即可：

修正后的CSS代码 #

.spotlight {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* 修复radial-gradient的连字符缺失问题 */
    background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0) 200px);
}

修正后的JavaScript代码 #

window.addEventListener("DOMContentLoaded", () => {
    const spotlight = document.querySelector('.spotlight');
    // 移除末尾多余的括号，避免拼接后CSS语法错误
    let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px';
    
    window.addEventListener('mousemove', e => updateSpotlight(e));

    function updateSpotlight(e) {
        spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize})`;
    }

    // 页面加载完成后，手动触发中心位置的聚光灯设置
    updateSpotlight({
        pageX: window.innerWidth / 2,
        pageY: window.innerHeight / 2
    });
});

关键修改说明 #

1. 修复CSS语法错误：原代码中radial gradient缺少连字符，改为标准的radial-gradient，确保初始背景样式能被正确解析。
2. 调整字符串拼接逻辑：原spotlightSize末尾多了一个括号，导致最终生成的CSS语法错误，将括号移到拼接时添加，保证样式代码合法。
3. 添加初始调用：通过模拟一个包含页面中心坐标的事件对象，手动调用updateSpotlight函数，让聚光灯默认显示在页面中心，同时不影响鼠标移动时的跟随效果。

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