如何实现加载文字动画结束后显示网页？（附现有代码）

一、修复现有CSS语法问题 #

你的CSS存在重复定义动画、括号闭合错误等问题，先修正并优化：

* {
    margin: 0;
    padding: 0;
    font-family: consolas;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #000;
}
/* 加载动画容器，用于全屏覆盖 */
#loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}
h2 {
    color: #000;
    font-size: 6em;
    display: flex;
}
h2 span {
    /* 动画只执行一次，而非无限循环 */
    animation: animate 4s linear forwards;  
}
h2 span:nth-child(1) { animation-delay: 0s; }
h2 span:nth-child(2) { animation-delay: 0.1s; }
h2 span:nth-child(3) { animation-delay: 0.2s; }
h2 span:nth-child(4) { animation-delay: 0.3s; }
h2 span:nth-child(5) { animation-delay: 0.4s; }
h2 span:nth-child(6) { animation-delay: 0.5s; }
h2 span:nth-child(7) { animation-delay: 0.6s; }
h2 span:nth-child(8) { animation-delay: 0.7s; }

@keyframes animate {
    0%, 100% {
        color: #fff;
        filter: blur(2px);
        text-shadow: 0 0 10px #00b3ff,
                     0 0 20px #00b3ff,
                     0 0 40px #00b3ff,
                     0 0 80px #00b3ff,
                     0 0 120px #00b3ff,
                     0 0 200px #00b3ff,
                     0 0 300px #00b3ff,
                     0 0 400px #00b3ff;
    }
    25%, 75% {
        color: #000;
        filter: blur(0px);
        text-shadow: none;
    }
}

/* 网页内容容器样式 */
#website {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
    color: #fff;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

二、调整HTML结构 #

添加加载器容器和网页内容容器，分离动画与实际内容：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Glowing Loading Text Animation</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <!-- 加载动画容器 -->
    <div id="loader">
        <h2>
            <span>L</span>
            <span>o</span>
            <span>a</span>
            <span>d</span>
            <span>i</span>
            <span>n</span>
            <span>g</span>
            <span>...</span>
        </h2>
    </div>

    <!-- 实际网页内容 -->
    <div id="website">
        <h1>欢迎访问我的网站</h1>
        <p>这里是网页的主要内容，加载动画结束后会平滑显示出来。</p>
        <!-- 可在此添加更多网页元素 -->
    </div>

    <script src="script.js"></script>
</body>
</html>

三、添加JavaScript控制逻辑 #

创建script.js文件，实现动画结束后切换内容的功能，提供两种可选方案：

const loader = document.getElementById('loader');
const website = document.getElementById('website');

// 方案1：监听最后一个字符的动画结束事件，精准触发切换
const lastSpan = document.querySelector('#loader h2 span:last-child');
lastSpan.addEventListener('animationend', () => {
    loader.style.opacity = '0';
    loader.style.visibility = 'hidden';
    website.style.opacity = '1';
    website.style.visibility = 'visible';
});

// 方案2：使用定时器，兼容所有浏览器（总时长=动画时长4s + 最后一个字符延迟0.7s）
// setTimeout(() => {
//     loader.style.opacity = '0';
//     loader.style.visibility = 'hidden';
//     website.style.opacity = '1';
//     website.style.visibility = 'visible';
// }, 4700);

关键修改说明 #

• 将加载动画放入全屏容器#loader，便于整体控制显示/隐藏，并添加过渡效果实现平滑切换。
• 把文字动画从infinite改为forwards，让动画执行一次后停在最终状态。
• 用opacity+visibility替代display控制内容显示，解决CSS动画无法过渡display属性的问题，实现淡入效果。
• 两种JS方案可按需选择：监听动画结束更精准，定时器兼容性更强。

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