<!DOCTYPE html>
<html lang="zh-CN">
<head>
<script defer src="https://umami.mmmi.cc/script.js" data-website-id="52ba1994-0280-4659-a168-b63bffa8617f"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ghost Green Theme - 医学级心跳 + 平滑进场动画</title>
<style>
    /* ========== 基础样式（保持不变）========== */
    body, body * {
        font-family: "Microsoft YaHei", "微软雅黑", sans-serif !important;
        font-style: normal !important;
    }
    :root {
        --ghost-primary: #66ffb3;
        --ghost-secondary: #99ffcc;
        --ghost-bg: #0a1a15;
        --ghost-text: #e0fff5;
        --ghost-accent: #00cc99;
        --exia-primary: #66ffb3;
        --exia-deep: #00cc88;
        --main-width: 1536px;
    }
    body {
        background-color: var(--ghost-bg) !important;
        color: var(--ghost-text) !important;
        margin: 0; padding: 0;
        overflow-x: hidden;
        position: relative;
    }
    /* 保持原有的医学心跳动画 */
    @keyframes medical-scale {
        0%,100%{transform:scale(1)}
        8%{transform:scale(1.02)}
        16%{transform:scale(0.99)}
        24%{transform:scale(1.015)}
        32%,100%{transform:scale(1)}
    }
    @keyframes medical-glow {
        0%,100%{text-shadow:0 0 8px rgba(102,255,179,.6)}
        10%{text-shadow:0 0 18px rgba(102,255,179,.95)}
        20%{text-shadow:0 0 10px rgba(102,255,179,.7)}
        28%{text-shadow:0 0 15px rgba(102,255,179,.85)}
    }
    /* 保持原有的样式应用心跳动画 */
    header .flex.items-center.gap-2.text-2xl.font-bold span, h3 {
        color: var(--ghost-primary)!important;
        display: inline-block;
        animation: medical-scale 1.6s ease-in-out infinite,
                   medical-glow 1.6s ease-in-out infinite!important;
    }
    .grid.w-full.gap-2.text-center.items-center.py-3 label { color: var(--ghost-secondary)!important; }
    .flex.items-center.gap-1 span { color: var(--ghost-primary)!important; }
    .flex.items-center.justify-between span { color: var(--ghost-secondary)!important; text-shadow:0 0 4px rgba(153,255,204,.3)!important; }
    .flex.justify-between.text-xs span { color: var(--ghost-accent)!important; text-shadow:0 0 5px rgba(0,204,153,.5)!important; }
    .bg-white,.bg-gray-50,.rounded-lg,.shadow{
        background:rgba(10,26,21,.7)!important;
        border:1px solid rgba(102,255,179,.3)!important;
        box-shadow:0 0 15px rgba(102,255,179,.2)!important;
        position: relative;
        z-index: 10;
    }
    progress,.progress-bar{accent-color:var(--ghost-primary)!important;}
    .max-w-screen-2xl { max-width: var(--main-width); }

    /* ==================== 1秒平滑进场动画样式 ==================== */
    .intro-fade-overlay {
        position: fixed; /* 固定在视口上 */
        inset: 0; /* 覆盖整个屏幕 */
        background-color: rgba(0, 0, 0, 1); /* 全黑背景 */
        z-index: 99999; /* 确保在最顶层 */
        opacity: 1; /* 初始完全不透明 */
        /* 关键：设置1秒的平滑过渡 */
        transition: opacity 1s ease-out;
    }
</style>
</head>
<body>
    <div class="intro-fade-overlay" id="intro-fade-overlay"></div>



    <script>
        // 页面加载完成后触发淡出效果
        window.addEventListener('load', () => {
            const overlay = document.getElementById('intro-fade-overlay');
            if (overlay) {
                // 1. 开始淡出：设置 opacity 为 0，CSS transition 会使其在 1 秒内平滑过渡
                overlay.style.opacity = '0';

                // 2. 动画结束后（1秒后），移除 DOM 元素，防止它继续遮挡点击事件
                setTimeout(() => {
                    overlay.remove();
                }, 1000); // 必须等于 CSS transition 的时间
            }
        });
        
        // 额外保险：如果 'load' 事件未触发，也要在 2 秒后强制移除
        setTimeout(() => {
            const overlay = document.getElementById('intro-fade-overlay');
            if (overlay && overlay.parentElement) {
                overlay.style.opacity = '0'; // 尝试淡出
                setTimeout(() => overlay.remove(), 1000);
            }
        }, 2000); // 确保即使资源加载缓慢，最晚 2 秒后也能看到内容
    </script>
</body>
</html>

测评