Ghost Green Theme - 医学级心跳 + 平滑进场动画
/* ========== 基础样式（保持不变）========== */
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;
}
<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>