网页加载播放30秒CSS动画后显示正文的实现及代码导入方案

核心交互实现 #

直接按以下结构写代码就能满足所有需求：

• DOM层单独加一个固定定位的全屏动画遮罩，放在页面最顶层，z-index设为最高优先级，保证加载期完全覆盖内容
• 正文内容统一放在一个容器里，页面初始状态下设置为不可见
• 把原故障效果的所有动画周期统一调整为30秒，和遮罩展示时长对齐
• 用原生setTimeout做时序控制，页面加载完成后开始计时，30秒到达后直接隐藏动画遮罩，同时展示正文内容。因为没有做本地状态缓存，每次刷新页面都会重置状态，重新走一遍完整的动画-展示流程。

主页面代码示例 #

<!-- index.html 主页面文件 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>你的页面标题</title>
    <!-- 独立引入动画样式文件，不需要把动画CSS写在主页面内 -->
    <link rel="stylesheet" href="./glitch-effect.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        /* 正文默认隐藏 */
        .page-content {
            display: none;
            padding: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }
        /* 动画遮罩默认全屏覆盖 */
        .glitch-overlay {
            position: fixed;
            inset: 0;
            background: #000;
            z-index: 99999;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        /* 通用隐藏类 */
        .hide {
            display: none !important;
        }
    </style>
</head>
<body>
    <!-- 故障动画遮罩层 -->
    <div class="glitch-overlay" id="glitchOverlay">
        <div class="glitch-label">YOUR TEXT HERE</div>
    </div>
    <!-- 原有静态网页的所有内容（标题、段落、列表、图片、链接等）全部放在这个容器内 -->
    <div class="page-content" id="pageContent">
        <!-- 这里插入你从普渡大学教学页面拿到的所有静态网页代码 -->
    </div>

    <script>
        // 30秒后切换显示状态
        const overlay = document.getElementById('glitchOverlay');
        const content = document.getElementById('pageContent');
        setTimeout(() => {
            overlay.classList.add('hide');
            content.style.display = 'block';
        }, 30000);
    </script>
</body>
</html>

独立存储的动画样式文件 #

你可以把所有故障效果相关的CSS单独存为glitch-effect.css文件，不需要耦合在主页面代码里，内容参考如下，注意把原CodePen代码里的动画时长统一改成30秒即可：

/* glitch-effect.css 独立动画文件 */
.glitch-label {
    position: relative;
    font-size: 4rem;
    font-weight: bold;
    color: #fff;
    text-transform: uppercase;
}
.glitch-label::before,
.glitch-label::after {
    content: attr(data-text);
    position: absolute;
    inset: 0;
    width: 100%;
}
.glitch-label::before {
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-effect-1 30s linear forwards;
}
.glitch-label::after {
    left: -2px;
    text-shadow: -2px 0 #00fff9;
    clip: rect(44px, 450px, 56px, 0);
    animation: glitch-effect-2 30s linear forwards;
}
@keyframes glitch-effect-1 {
    /* 保留你从CodePen获取的原有故障动画关键帧参数即可，不需要改帧的比例，只需要把总时长对齐30s */
    0% { clip: rect(12px, 9999px, 72px, 0); transform: skew(0.4deg); }
    10% { clip: rect(62px, 9999px, 24px, 0); transform: skew(0.2deg); }
    /* 中间帧省略，直接复用原代码的关键帧定义 */
    100% { clip: rect(33px, 9999px, 88px, 0); transform: skew(0.1deg); }
}
@keyframes glitch-effect-2 {
    /* 同上，复用原有CodePen的关键帧参数，总时长设为30s */
    0% { clip: rect(87px, 9999px, 21px, 0); transform: skew(0.3deg); }
    10% { clip: rect(14px, 9999px, 74px, 0); transform: skew(0.6deg); }
    /* 中间帧省略 */
    100% { clip: rect(5px, 9999px, 62px, 0); transform: skew(0.5deg); }
}

关于动画代码拆分引入的说明 #

完全可以把动画相关代码单独存储，不需要全部耦合在主文件里：

• 所有动画相关的CSS样式可以单独存为.css文件，在主页面head标签内通过<link rel="stylesheet" href="对应文件路径">的方式引入
• 如果动画有配套的交互逻辑，也可以单独存为.js文件，在主页面body末尾通过<script src="对应文件路径"></script>的方式引入
• 只要文件路径配置正确，独立引入的代码和直接写在主页面内的运行效果完全一致，后续修改动画效果时只需要调整独立的动画文件，不会影响主页面的原有内容代码，维护成本更低。

踩坑提示 #

• 不要给时序控制逻辑加localStorage、sessionStorage之类的状态缓存，否则会导致刷新页面时不重新播放动画，不符合需求
• 动画遮罩的z-index值要设置得足够大，避免被页面内其他定位元素覆盖，导致加载期内容提前漏出
• 两个伪元素的动画时长必须和setTimeout的30000毫秒严格对齐，避免出现动画没播完遮罩提前消失，或者动画播完遮罩长时间不隐藏的问题

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