diff --git a/me.html b/me.html index 83b8bf1..f0986ae 100644 --- a/me.html +++ b/me.html @@ -18,9 +18,11 @@ [data-theme="day"] { --bg-color: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%); --text-color: #1a1a2e; /* 极深蓝黑,保证可见度 */ - --accent-color: #0044cc; + --accent-color: #3567ff; --loader-bg: #f0f2f5; --loader-text: #2c3e50; + --title-gradient: linear-gradient(120deg, #1a1a2e 0%, #2b56ff 50%, #1947ff 100%); + --veil: radial-gradient(closest-side, rgba(255,255,255,0.0), rgba(255,255,255,0.0) 70%); } /* === 黑夜模式 (霓虹/深空) === */ @@ -30,6 +32,8 @@ --accent-color: #00FFFF; --loader-bg: #000000; --loader-text: #FFFFFF; + --title-gradient: linear-gradient(120deg, #ffffff 0%, #7dfbff 35%, #ff7af3 70%, #ffd36e 100%); + --veil: radial-gradient(closest-side, rgba(0,0,0,0.55), rgba(0,0,0,0.0) 72%); } body { @@ -73,19 +77,34 @@ /* === 2. 叙事文本层 (DOM覆盖) === */ #narrative-layer { - position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); - text-align: center; width: 90%; pointer-events: none; z-index: 5; + position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%); + text-align: center; width: 72%; max-width: 1000px; pointer-events: none; z-index: 5; + padding: 16px 24px; + } + #narrative-layer::before { + content: ''; + position: absolute; inset: -4% 10% 0 10%; + transform: translateZ(0); + background: var(--veil); + filter: blur(20px) saturate(1.1); + pointer-events: none; + z-index: -1; } .n-title { - font-size: 8vw; font-weight: 900; letter-spacing: -2px; margin-bottom: 10px; + font-size: clamp(42px, 8vw, 128px); font-weight: 800; letter-spacing: 0; margin-bottom: 14px; opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.2, 1, 0.3, 1); - background: linear-gradient(45deg, var(--text-color), var(--accent-color)); + background: var(--title-gradient); + background-size: 200% 200%; animation: gradientShift 9s ease-in-out infinite; -webkit-background-clip: text; -webkit-text-fill-color: transparent; + text-shadow: 0 10px 40px rgba(0,0,0,0.35); } + [data-theme="day"] .n-title { -webkit-text-stroke: 0.6px rgba(255,255,255,0.10); } + [data-theme="night"] .n-title { -webkit-text-stroke: 0.6px rgba(0,0,0,0.20); } .n-sub { - font-size: 18px; font-weight: 400; letter-spacing: 6px; opacity: 0; + font-size: 20px; font-weight: 500; letter-spacing: 6px; opacity: 0; transform: translateY(20px); transition: all 0.8s 0.2s cubic-bezier(0.2, 1, 0.3, 1); color: var(--text-color); + text-shadow: 0 6px 24px rgba(0,0,0,0.25); } /* 激活状态类名 */ .show-text .n-title, .show-text .n-sub { opacity: 1; transform: translateY(0); } @@ -104,7 +123,7 @@ } .center-stage { - position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); + position: absolute; top: 78%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 100%; pointer-events: auto; } @@ -131,6 +150,20 @@ @keyframes breathe { 0%,100%{opacity:0.6} 50%{opacity:1} } @keyframes spin { to { transform: rotate(360deg); } } + @keyframes gradientShift { + 0% { background-position: 0% 50%; } + 50% { background-position: 100% 50%; } + 100% { background-position: 0% 50%; } + } + + #canvas-container { position: fixed; inset: 0; z-index: 1; } + #aurora-layer { position: fixed; inset: 0; z-index: 2; pointer-events: none; } + #aurora-layer::before, #aurora-layer::after { content: ''; position: absolute; inset: -20% -10%; filter: blur(60px); opacity: 0.25; } + @keyframes auroraDrift { 0% { transform: translate3d(-4%, -2%, 0) scale(1); } 50% { transform: translate3d(4%, 2%, 0) scale(1.05); } 100% { transform: translate3d(-4%, 0, 0) scale(1); } } + [data-theme="day"] #aurora-layer::before { background: radial-gradient(60% 40% at 25% 30%, rgba(255,180,200,0.35), transparent 60%); animation: auroraDrift 22s ease-in-out infinite; } + [data-theme="day"] #aurora-layer::after { background: radial-gradient(60% 40% at 70% 60%, rgba(110,195,255,0.35), transparent 60%); animation: auroraDrift 28s ease-in-out infinite reverse; } + [data-theme="night"] #aurora-layer::before { background: radial-gradient(70% 45% at 20% 30%, rgba(0,255,255,0.28), transparent 62%); animation: auroraDrift 24s ease-in-out infinite; } + [data-theme="night"] #aurora-layer::after { background: radial-gradient(70% 45% at 75% 65%, rgba(255,122,243,0.24), transparent 62%); animation: auroraDrift 32s ease-in-out infinite reverse; } @@ -183,6 +216,7 @@
+