diff --git a/me.html b/me.html index f0986ae..d3b5cd1 100644 --- a/me.html +++ b/me.html @@ -22,7 +22,7 @@ --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%); + --veil: radial-gradient(closest-side, rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.0) 70%); } /* === 黑夜模式 (霓虹/深空) === */ @@ -33,137 +33,306 @@ --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%); + --veil: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.0) 72%); } body { - margin: 0; overflow: hidden; + margin: 0; + overflow: hidden; background: var(--bg-color); color: var(--text-color); font-family: 'Helvetica Neue', Arial, sans-serif; transition: background 1s, color 1s; - user-select: none; cursor: default; + user-select: none; + cursor: default; } /* === 1. 智能加载层 === */ #start-screen { - position: fixed; inset: 0; background: var(--loader-bg); z-index: 100; - display: flex; flex-direction: column; align-items: center; justify-content: center; + position: fixed; + inset: 0; + background: var(--loader-bg); + z-index: 100; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; transition: opacity 1s cubic-bezier(0.65, 0, 0.35, 1); } .logo-text { - font-family: 'Times New Roman', serif; font-size: 32px; letter-spacing: 8px; - color: var(--loader-text); margin-bottom: 20px; animation: breathe 3s infinite; + font-family: 'Times New Roman', serif; + font-size: 32px; + letter-spacing: 8px; + color: var(--loader-text); + margin-bottom: 20px; + animation: breathe 3s infinite; } .loader-ring { - width: 50px; height: 50px; border: 2px solid rgba(128,128,128,0.2); - border-top-color: var(--accent-color); border-radius: 50%; - animation: spin 1s linear infinite; margin-bottom: 20px; + width: 50px; + height: 50px; + border: 2px solid rgba(128, 128, 128, 0.2); + border-top-color: var(--accent-color); + border-radius: 50%; + animation: spin 1s linear infinite; + margin-bottom: 20px; } .status-text { - font-size: 14px; letter-spacing: 2px; color: var(--loader-text); - opacity: 0.8; height: 20px; + font-size: 14px; + letter-spacing: 2px; + color: var(--loader-text); + opacity: 0.8; + height: 20px; } .perm-hint { - margin-top: 30px; padding: 10px 20px; border: 1px solid var(--accent-color); - border-radius: 20px; font-size: 12px; color: var(--loader-text); - opacity: 0; transform: translateY(10px); transition: all 1s; + margin-top: 30px; + padding: 10px 20px; + border: 1px solid var(--accent-color); + border-radius: 20px; + font-size: 12px; + color: var(--loader-text); + opacity: 0; + transform: translateY(10px); + transition: all 1s; + } + + .perm-hint.show { + opacity: 1; + transform: translateY(0); } - .perm-hint.show { opacity: 1; transform: translateY(0); } /* === 2. 叙事文本层 (DOM覆盖) === */ #narrative-layer { - position: absolute; top: 28%; left: 50%; transform: translate(-50%, -50%); - text-align: center; width: 72%; max-width: 1000px; 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%; + 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: 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); + 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: 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); + 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); } + + [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: 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); + 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); + text-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } + /* 激活状态类名 */ - .show-text .n-title, .show-text .n-sub { opacity: 1; transform: translateY(0); } + .show-text .n-title, .show-text .n-sub { + opacity: 1; + transform: translateY(0); + } /* === 3. UI HUD === */ #ui-layer { - position: fixed; inset: 0; pointer-events: none; z-index: 20; - display: flex; flex-direction: column; justify-content: space-between; - padding: 40px; opacity: 0; transition: opacity 1.5s ease; + position: fixed; + inset: 0; + pointer-events: none; + z-index: 20; + display: flex; + flex-direction: column; + justify-content: space-between; + padding: 40px; + opacity: 0; + transition: opacity 1.5s ease; } .header { - display: flex; justify-content: space-between; - font-size: 10px; letter-spacing: 2px; text-transform: uppercase; - color: var(--text-color); opacity: 0.7; font-weight: 600; + display: flex; + justify-content: space-between; + font-size: 10px; + letter-spacing: 2px; + text-transform: uppercase; + color: var(--text-color); + opacity: 0.7; + font-weight: 600; } .center-stage { - position: absolute; top: 78%; left: 50%; transform: translate(-50%, -50%); - text-align: center; width: 100%; pointer-events: auto; + position: absolute; + top: 78%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + width: 100%; + pointer-events: auto; } .main-hint { - font-size: 20px; font-weight: 300; letter-spacing: 8px; cursor: pointer; - padding: 20px; transition: all 0.3s; + font-size: 20px; + font-weight: 300; + letter-spacing: 8px; + cursor: pointer; + padding: 20px; + transition: all 0.3s; + } + + .main-hint:hover { + letter-spacing: 10px; + color: var(--accent-color); } - .main-hint:hover { letter-spacing: 10px; color: var(--accent-color); } .sub-hint { - font-size: 10px; opacity: 0.6; margin-top: 15px; letter-spacing: 3px; + font-size: 10px; + opacity: 0.6; + margin-top: 15px; + letter-spacing: 3px; font-family: 'Courier New', monospace; } .exit-btn { - margin-top: 40px; display: inline-block; - font-size: 10px; letter-spacing: 2px; - padding: 10px 24px; border: 1px solid var(--text-color); - border-radius: 30px; cursor: pointer; opacity: 0; - transform: translateY(20px); transition: all 0.5s; pointer-events: none; + margin-top: 40px; + display: inline-block; + font-size: 10px; + letter-spacing: 2px; + padding: 10px 24px; + border: 1px solid var(--text-color); + border-radius: 30px; + cursor: pointer; + opacity: 0; + transform: translateY(20px); + transition: all 0.5s; + pointer-events: none; + } + + .exit-btn.visible { + opacity: 0.8; + transform: translateY(0); + pointer-events: auto; + } + + .exit-btn:hover { + background: var(--text-color); + color: var(--bg-color); + opacity: 1; + } + + @keyframes breathe { + 0%, 100% { + opacity: 0.6 + } + 50% { + opacity: 1 + } + } + + @keyframes spin { + to { + transform: rotate(360deg); + } } - .exit-btn.visible { opacity: 0.8; transform: translateY(0); pointer-events: auto; } - .exit-btn:hover { background: var(--text-color); color: var(--bg-color); opacity: 1; } - @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%; } + 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; } + #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; + } @@ -177,16 +346,17 @@ - +