<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>春节欢迎特效</title>
    <style>
        /* 设置全局背景和字体 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f4;
        }

        /* 春节欢迎横幅样式 */
        .welcome-banner {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 15px 0;
            background-color: #ff4500;  /* 春节红 */
            color: white;
            font-size: 1.5em;
            font-weight: bold;
            text-align: center;
            z-index: 9999;
            display: none;
            animation: slideDown 1s ease-out forwards;
        }

        /* 横幅动画效果 */
        @keyframes slideDown {
            0% {
                transform: translateY(-100%);
            }
            100% {
                transform: translateY(0);
            }
        }

        /* 关闭按钮样式 */
        .close-btn {
            position: absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            font-size: 1.2em;
            color: white;
            background: none;
            border: none;
            cursor: pointer;
        }

        .close-btn:hover {
            color: #ffd700; /* 悬停效果 */
        }

        /* 响应式设计 */
        @media screen and (max-width: 768px) {
            .welcome-banner {
                font-size: 1.2em;
            }
        }

        /* 页面内容样式 */
        .content {
            margin-top: 100px;
            padding: 20px;
            text-align: center;
            font-size: 1.2em;
        }

        /* Copyright部分 */
        .copyright {
            position: fixed;
            width: 100%;
            bottom: 0;
            left: 0;
            text-align: center;
            font-size: 14px;
            background-color: #333;
            color: white;
            padding: 10px 0;
        }
    </style>
</head>
<body>

<!-- 春节欢迎横幅 -->
<div class="welcome-banner" id="welcome-banner">
    <span>🎉 春节快乐！🎉</span>
    <button class="close-btn" onclick="closeBanner()">×</button>
</div>

<!-- 页面内容 -->
<div class="content">
    <h1>欢迎来到我们的网站！</h1>
    <p>这里是一些内容。</p>
</div>

<!-- Copyright部分 -->
<div class="copyright">
    <p>© 2025 版权所有 - 您的网站名</p>
</div>

<script>
    // 页面加载时显示春节欢迎横幅
    window.onload = function() {
        setTimeout(function() {
            document.getElementById('welcome-banner').style.display = 'block';
        }, 500);  // 延迟500ms后显示横幅
    };

    // 关闭春节欢迎横幅
    function closeBanner() {
        document.getElementById('welcome-banner').style.display = 'none';
    }

    // 自动消失横幅，5秒后关闭
    setTimeout(function() {
        closeBanner();
    }, 5000);  // 5秒钟后自动关闭
</script>

</body>
</html>
