HTML实现网站欢迎页过渡

作者：System 时间：2024年08月21日分类：所有,css3 字数：1532




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎页面</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: Arial, sans-serif;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #2254EB;
            transition: background 2s ease-in-out;
        }
        .content {
            text-align: center;
            color: white;
        }
        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, #ff9a9e, #fad0c4);
            transition: opacity 2s ease-in-out;
            opacity: 1;
        }
        .hidden {
            display: none;
        }
    </style>
</head>
<body>
    <div class="content">
        <h1>欢迎来到我的网站</h1>
        <p>页面将在几秒后开始过渡...</p>
    </div>
    <div class="overlay"></div>
    <script>
        // 页面加载完成后移除overlay和相关样式
        window.onload = function() {
            setTimeout(function() {
                document.querySelector('.overlay').classList.add('hidden');
                document.body.style.background = '#2254EB';
            }, 3000);
        };
    </script>
</body>
</html>

这段代码展示了如何使用CSS样式和JavaScript来实现一个简单的网站欢迎页面过渡效果。页面加载时，会有一个渐变覆盖层，3秒后逐渐消失，背景颜色也发生变化，展示出网站的实际内容。

HTML实现网站欢迎页过渡

评论已关闭

推荐阅读