求助：点击SVG实现全屏白屏过渡后自动跳转新页面

实现思路 #

点击SVG图标时，先在页面上生成一个全屏白色遮罩层并平滑显示，等待指定时长后自动跳转到目标页面。通过JavaScript监听点击事件，结合CSS过渡效果实现流畅的白屏切换体验。

完整代码实现 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 全屏白屏遮罩样式 */
        .fullscreen-white-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            background-color: #ffffff;
            z-index: 9999;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease, visibility 0.5s ease;
        }
        .fullscreen-white-overlay.active {
            opacity: 1;
            visibility: visible;
        }

        /* 给SVG添加鼠标指针样式，提示可点击 */
        #icon {
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="fullbody1">
        <svg id="icon" width="63" height="63" viewBox="0 0 63 63" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M39.9114 1.80814L62.7952 59.0791C63.5444 60.96 62.1463 63 60.0994 63H50.9285C49.7111 63 48.6274 62.2516 48.2127 61.119C43.2025 47.5746 38.1856 34.0234 33.1754 20.479C32.5934 18.896 30.3325 18.896 29.7505 20.479C24.767 34.0234 19.7769 47.5679 14.7934 61.1124C14.3787 62.245 13.2884 63 12.0709 63H2.90001C0.859807 63 -0.544922 60.96 0.204268 59.0791L23.0078 1.81476C23.4426 0.721932 24.5128 0 25.7035 0L37.2156 0C38.4063 0 39.4699 0.715309 39.9114 1.81476V1.80814ZM32.7138 39.7459L38.995 56.7079C39.5234 58.1386 38.8545 59.7281 37.4565 60.3573L32.3325 62.6688C31.784 62.9139 31.1552 62.9139 30.6067 62.6688L25.5095 60.3573C24.1182 59.7281 23.4492 58.1386 23.971 56.7146L30.2187 39.7459C30.6469 38.5935 32.2924 38.5868 32.7205 39.7459H32.7138Z" fill="#FDFDFD"/>
        </svg>
    </div>

    <!-- 全屏白屏遮罩层 -->
    <div class="fullscreen-white-overlay" id="whiteOverlay"></div>

    <script>
        // 获取SVG元素和遮罩层元素
        const svgIcon = document.getElementById('icon');
        const whiteOverlay = document.getElementById('whiteOverlay');
        // 目标跳转页面地址，自行修改为你的目标链接
        const targetUrl = 'https://your-target-page.com';
        // 白屏显示时长（毫秒），可按需调整
        const delayTime = 1000;

        // 监听SVG点击事件
        svgIcon.addEventListener('click', () => {
            // 激活白屏遮罩
            whiteOverlay.classList.add('active');
            // 延迟指定时间后跳转页面
            setTimeout(() => {
                window.location.href = targetUrl;
            }, delayTime);
        });
    </script>
</body>
</html>

代码说明 #

• CSS部分：定义全屏遮罩的基础样式，初始状态隐藏，添加active类后通过过渡效果平滑显示白色全屏层；给SVG设置cursor: pointer，明确提示用户该元素可点击。
• HTML部分：新增用于实现白屏效果的<div>遮罩层，放在页面底部确保层级正确。
• JavaScript部分：监听SVG的点击事件，触发后显示遮罩层，通过setTimeout设置延迟跳转逻辑。你可以修改targetUrl指定跳转目标页面，调整delayTime改变白屏停留的时长。

内容的提问来源于stack exchange，提问作者minh nhat vo