/* ============================================ 酷炫科技风格简历 - 全新设计 ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600;700&display=swap'); :root { /* 默认主题 - 霓虹青色 */ --neon-primary: #00f0ff; --neon-secondary: #0066ff; --neon-accent: #8b5cf6; --neon-highlight: #ff00ff; --neon-success: #00ff88; --dark-bg: #0a0e27; --dark-surface: #151932; --dark-card: #1a1f3a; --text-primary: #ffffff; --text-secondary: #a0aec0; --text-muted: #718096; /* rgba变量 - 默认主题 */ --neon-primary-rgba-03: rgba(0, 240, 255, 0.03); --neon-primary-rgba-05: rgba(0, 240, 255, 0.05); --neon-primary-rgba-1: rgba(0, 240, 255, 0.1); --neon-primary-rgba-2: rgba(0, 240, 255, 0.2); --neon-primary-rgba-3: rgba(0, 240, 255, 0.3); --neon-primary-rgba-4: rgba(0, 240, 255, 0.4); --neon-primary-rgba-5: rgba(0, 240, 255, 0.5); --neon-accent-rgba-05: rgba(139, 92, 246, 0.05); --neon-accent-rgba-1: rgba(139, 92, 246, 0.1); --neon-accent-rgba-2: rgba(139, 92, 246, 0.2); --neon-accent-rgba-3: rgba(139, 92, 246, 0.3); --neon-highlight-rgba-03: rgba(255, 0, 255, 0.03); /* 动画时长 */ --transition-fast: 0.2s; --transition-normal: 0.3s; --transition-slow: 0.6s; } /* 主题1 - 霓虹青色（默认） */ body[data-theme="cyan"] { --neon-primary: #00f0ff; --neon-secondary: #0066ff; --neon-accent: #8b5cf6; --neon-highlight: #ff00ff; --neon-success: #00ff88; --neon-primary-rgba-03: rgba(0, 240, 255, 0.03); --neon-primary-rgba-05: rgba(0, 240, 255, 0.05); --neon-primary-rgba-1: rgba(0, 240, 255, 0.1); --neon-primary-rgba-2: rgba(0, 240, 255, 0.2); --neon-primary-rgba-3: rgba(0, 240, 255, 0.3); --neon-primary-rgba-4: rgba(0, 240, 255, 0.4); --neon-primary-rgba-5: rgba(0, 240, 255, 0.5); --neon-accent-rgba-05: rgba(139, 92, 246, 0.05); --neon-accent-rgba-1: rgba(139, 92, 246, 0.1); --neon-accent-rgba-3: rgba(139, 92, 246, 0.3); --neon-highlight-rgba-03: rgba(255, 0, 255, 0.03); } /* 主题2 - 火焰红橙 */ body[data-theme="fire"] { --neon-primary: #ff6b35; --neon-secondary: #f7931e; --neon-accent: #ff1744; --neon-highlight: #ff9800; --neon-success: #ff6b6b; --dark-bg: #1a0a0a; --dark-surface: #2a1515; --dark-card: #3a2020; --neon-primary-rgba-03: rgba(255, 107, 53, 0.03); --neon-primary-rgba-05: rgba(255, 107, 53, 0.05); --neon-primary-rgba-1: rgba(255, 107, 53, 0.1); --neon-primary-rgba-2: rgba(255, 107, 53, 0.2); --neon-primary-rgba-3: rgba(255, 107, 53, 0.3); --neon-primary-rgba-4: rgba(255, 107, 53, 0.4); --neon-primary-rgba-5: rgba(255, 107, 53, 0.5); --neon-accent-rgba-05: rgba(255, 23, 68, 0.05); --neon-accent-rgba-1: rgba(255, 23, 68, 0.1); --neon-accent-rgba-3: rgba(255, 23, 68, 0.3); --neon-highlight-rgba-03: rgba(255, 152, 0, 0.03); } /* 主题3 - 森林绿 */ body[data-theme="forest"] { --neon-primary: #00ff88; --neon-secondary: #39ff14; --neon-accent: #7fff00; --neon-highlight: #00ff41; --neon-success: #32cd32; --dark-bg: #0a1a0a; --dark-surface: #152a15; --dark-card: #1f3a1f; --neon-primary-rgba-03: rgba(0, 255, 136, 0.03); --neon-primary-rgba-05: rgba(0, 255, 136, 0.05); --neon-primary-rgba-1: rgba(0, 255, 136, 0.1); --neon-primary-rgba-2: rgba(0, 255, 136, 0.2); --neon-primary-rgba-3: rgba(0, 255, 136, 0.3); --neon-primary-rgba-4: rgba(0, 255, 136, 0.4); --neon-primary-rgba-5: rgba(0, 255, 136, 0.5); --neon-accent-rgba-05: rgba(127, 255, 0, 0.05); --neon-accent-rgba-1: rgba(127, 255, 0, 0.1); --neon-accent-rgba-3: rgba(127, 255, 0, 0.3); --neon-highlight-rgba-03: rgba(0, 255, 65, 0.03); } /* 主题4 - 海洋蓝 */ body[data-theme="ocean"] { --neon-primary: #00d4ff; --neon-secondary: #0099cc; --neon-accent: #0066ff; --neon-highlight: #00bfff; --neon-success: #00ffff; --dark-bg: #0a0e1a; --dark-surface: #151a2a; --dark-card: #1a1f3a; --neon-primary-rgba-03: rgba(0, 212, 255, 0.03); --neon-primary-rgba-05: rgba(0, 212, 255, 0.05); --neon-primary-rgba-1: rgba(0, 212, 255, 0.1); --neon-primary-rgba-2: rgba(0, 212, 255, 0.2); --neon-primary-rgba-3: rgba(0, 212, 255, 0.3); --neon-primary-rgba-4: rgba(0, 212, 255, 0.4); --neon-primary-rgba-5: rgba(0, 212, 255, 0.5); --neon-accent-rgba-05: rgba(0, 102, 255, 0.05); --neon-accent-rgba-1: rgba(0, 102, 255, 0.1); --neon-accent-rgba-3: rgba(0, 102, 255, 0.3); --neon-highlight-rgba-03: rgba(0, 191, 255, 0.03); } /* 主题5 - 紫色梦幻 */ body[data-theme="purple"] { --neon-primary: #b794f6; --neon-secondary: #8b5cf6; --neon-accent: #a855f7; --neon-highlight: #c084fc; --neon-success: #d946ef; --dark-bg: #1a0a2a; --dark-surface: #2a153a; --dark-card: #3a204a; --neon-primary-rgba-03: rgba(183, 148, 246, 0.03); --neon-primary-rgba-05: rgba(183, 148, 246, 0.05); --neon-primary-rgba-1: rgba(183, 148, 246, 0.1); --neon-primary-rgba-2: rgba(183, 148, 246, 0.2); --neon-primary-rgba-3: rgba(183, 148, 246, 0.3); --neon-primary-rgba-4: rgba(183, 148, 246, 0.4); --neon-primary-rgba-5: rgba(183, 148, 246, 0.5); --neon-accent-rgba-05: rgba(168, 85, 247, 0.05); --neon-accent-rgba-1: rgba(168, 85, 247, 0.1); --neon-accent-rgba-3: rgba(168, 85, 247, 0.3); --neon-highlight-rgba-03: rgba(192, 132, 252, 0.03); } /* 主题6 - 金色奢华 */ body[data-theme="gold"] { --neon-primary: #ffd700; --neon-secondary: #ffb347; --neon-accent: #ffa500; --neon-highlight: #ff8c00; --neon-success: #ffd700; --dark-bg: #1a150a; --dark-surface: #2a2015; --dark-card: #3a2a1a; --neon-primary-rgba-03: rgba(255, 215, 0, 0.03); --neon-primary-rgba-05: rgba(255, 215, 0, 0.05); --neon-primary-rgba-1: rgba(255, 215, 0, 0.1); --neon-primary-rgba-2: rgba(255, 215, 0, 0.2); --neon-primary-rgba-3: rgba(255, 215, 0, 0.3); --neon-primary-rgba-4: rgba(255, 215, 0, 0.4); --neon-primary-rgba-5: rgba(255, 215, 0, 0.5); --neon-accent-rgba-05: rgba(255, 165, 0, 0.05); --neon-accent-rgba-1: rgba(255, 165, 0, 0.1); --neon-accent-rgba-3: rgba(255, 165, 0, 0.3); --neon-highlight-rgba-03: rgba(255, 140, 0, 0.03); } /* 主题7 - 粉色少女 */ body[data-theme="pink"] { --neon-primary: #ff69b4; --neon-secondary: #ff1493; --neon-accent: #ff00ff; --neon-highlight: #ff10f0; --neon-success: #ff6ec7; --dark-bg: #1a0a1a; --dark-surface: #2a152a; --dark-card: #3a203a; --neon-primary-rgba-03: rgba(255, 105, 180, 0.03); --neon-primary-rgba-05: rgba(255, 105, 180, 0.05); --neon-primary-rgba-1: rgba(255, 105, 180, 0.1); --neon-primary-rgba-2: rgba(255, 105, 180, 0.2); --neon-primary-rgba-3: rgba(255, 105, 180, 0.3); --neon-primary-rgba-4: rgba(255, 105, 180, 0.4); --neon-primary-rgba-5: rgba(255, 105, 180, 0.5); --neon-accent-rgba-05: rgba(255, 0, 255, 0.05); --neon-accent-rgba-1: rgba(255, 0, 255, 0.1); --neon-accent-rgba-3: rgba(255, 0, 255, 0.3); --neon-highlight-rgba-03: rgba(255, 16, 240, 0.03); } /* 主题8 - 线条像素风格（线条小狗风格） */ body[data-theme="pixel"] { --neon-primary: #000000; --neon-secondary: #333333; --neon-accent: #000000; --neon-highlight: #000000; --neon-success: #000000; --dark-bg: #ffffff; --dark-surface: #fafafa; --dark-card: #ffffff; --text-primary: #000000; --text-secondary: #333333; --text-muted: #666666; --neon-primary-rgba-03: rgba(0, 0, 0, 0.03); --neon-primary-rgba-05: rgba(0, 0, 0, 0.05); --neon-primary-rgba-1: rgba(0, 0, 0, 0.1); --neon-primary-rgba-2: rgba(0, 0, 0, 0.2); --neon-primary-rgba-3: rgba(0, 0, 0, 0.3); --neon-primary-rgba-4: rgba(0, 0, 0, 0.4); --neon-primary-rgba-5: rgba(0, 0, 0, 0.5); --neon-accent-rgba-05: rgba(0, 0, 0, 0.05); --neon-accent-rgba-1: rgba(0, 0, 0, 0.1); --neon-accent-rgba-2: rgba(0, 0, 0, 0.2); --neon-accent-rgba-3: rgba(0, 0, 0, 0.3); --neon-highlight-rgba-03: rgba(0, 0, 0, 0.03); } /* 线条风格特殊样式 - 白色背景，黑色不规则线条 */ body[data-theme="pixel"] { font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', 'Microsoft YaHei', sans-serif; background: #ffffff; position: relative; } body[data-theme="pixel"]::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('data:image/svg+xml;utf8,'); background-size: 200px 200px; z-index: 0; pointer-events: none; opacity: 0.3; } body[data-theme="pixel"] .floating-bg { display: none; } body[data-theme="pixel"] .floating-item { display: none; } body[data-theme="pixel"] .container { background: transparent; border: none; box-shadow: none; } body[data-theme="pixel"] .container::before { display: none; } /* 不规则线条边框 - 使用SVG作为边框 */ body[data-theme="pixel"] .skill-card, body[data-theme="pixel"] .experience-item, body[data-theme="pixel"] .project-item, body[data-theme="pixel"] .education-item, body[data-theme="pixel"] .profile-header, body[data-theme="pixel"] .job-intention { background: #ffffff; border: none; border-radius: 0; position: relative; padding: 2rem; box-shadow: none; clip-path: polygon( 0% 5%, 3% 0%, 8% 2%, 12% 0%, 18% 3%, 22% 0%, 28% 2%, 32% 0%, 38% 3%, 42% 0%, 48% 2%, 52% 0%, 58% 3%, 62% 0%, 68% 2%, 72% 0%, 78% 3%, 82% 0%, 88% 2%, 92% 0%, 98% 3%, 100% 0%, 100% 8%, 97% 12%, 100% 18%, 98% 22%, 100% 28%, 97% 32%, 100% 38%, 98% 42%, 100% 48%, 97% 52%, 100% 58%, 98% 62%, 100% 68%, 97% 72%, 100% 78%, 98% 82%, 100% 88%, 97% 92%, 100% 98%, 98% 100%, 92% 97%, 88% 100%, 82% 97%, 78% 100%, 72% 97%, 68% 100%, 62% 97%, 58% 100%, 52% 97%, 48% 100%, 42% 97%, 38% 100%, 32% 97%, 28% 100%, 22% 97%, 18% 100%, 12% 97%, 8% 100%, 3% 97%, 0% 100%, 0% 95%, 2% 92%, 0% 88%, 3% 85%, 0% 82%, 2% 78%, 0% 72%, 3% 68%, 0% 62%, 2% 58%, 0% 52%, 3% 48%, 0% 42%, 2% 38%, 0% 32%, 3% 28%, 0% 22%, 2% 18%, 0% 12%, 3% 8%, 0% 5% ); } body[data-theme="pixel"] .skill-card::before, body[data-theme="pixel"] .experience-item::before, body[data-theme="pixel"] .project-item::before, body[data-theme="pixel"] .education-item::before, body[data-theme="pixel"] .profile-header::before, body[data-theme="pixel"] .job-intention::before { content: ''; position: absolute; inset: 0; border: 3px solid #000000; border-radius: 0; clip-path: polygon( 0% 5%, 3% 0%, 8% 2%, 12% 0%, 18% 3%, 22% 0%, 28% 2%, 32% 0%, 38% 3%, 42% 0%, 48% 2%, 52% 0%, 58% 3%, 62% 0%, 68% 2%, 72% 0%, 78% 3%, 82% 0%, 88% 2%, 92% 0%, 98% 3%, 100% 0%, 100% 8%, 97% 12%, 100% 18%, 98% 22%, 100% 28%, 97% 32%, 100% 38%, 98% 42%, 100% 48%, 97% 52%, 100% 58%, 98% 62%, 100% 68%, 97% 72%, 100% 78%, 98% 82%, 100% 88%, 97% 92%, 100% 98%, 98% 100%, 92% 97%, 88% 100%, 82% 97%, 78% 100%, 72% 97%, 68% 100%, 62% 97%, 58% 100%, 52% 97%, 48% 100%, 42% 97%, 38% 100%, 32% 97%, 28% 100%, 22% 97%, 18% 100%, 12% 97%, 8% 100%, 3% 97%, 0% 100%, 0% 95%, 2% 92%, 0% 88%, 3% 85%, 0% 82%, 2% 78%, 0% 72%, 3% 68%, 0% 62%, 2% 58%, 0% 52%, 3% 48%, 0% 42%, 2% 38%, 0% 32%, 3% 28%, 0% 22%, 2% 18%, 0% 12%, 3% 8%, 0% 5% ); pointer-events: none; z-index: 1; } body[data-theme="pixel"] .skill-card > *, body[data-theme="pixel"] .experience-item > *, body[data-theme="pixel"] .project-item > *, body[data-theme="pixel"] .education-item > *, body[data-theme="pixel"] .profile-header > *, body[data-theme="pixel"] .job-intention > * { position: relative; z-index: 2; } body[data-theme="pixel"] h1, body[data-theme="pixel"] h2, body[data-theme="pixel"] h3 { font-family: 'Comic Sans MS', 'Marker Felt', 'Arial Rounded MT Bold', sans-serif; color: #000000; text-shadow: none; letter-spacing: 1px; font-weight: bold; position: relative; } body[data-theme="pixel"] h1::after, body[data-theme="pixel"] h2::after, body[data-theme="pixel"] h3::after { content: ''; position: absolute; bottom: -5px; left: 0; width: 100%; height: 2px; background: url('data:image/svg+xml;utf8,'); background-size: 200px 4px; opacity: 0.8; } body[data-theme="pixel"] .avatar { border: 4px solid #000000; border-radius: 0; box-shadow: none; position: relative; } body[data-theme="pixel"] .avatar::before { content: ''; position: absolute; inset: -8px; border: 2px solid #000000; clip-path: polygon( 0% 10%, 5% 0%, 10% 5%, 15% 0%, 20% 5%, 25% 0%, 30% 5%, 35% 0%, 40% 5%, 45% 0%, 50% 5%, 55% 0%, 60% 5%, 65% 0%, 70% 5%, 75% 0%, 80% 5%, 85% 0%, 90% 5%, 95% 0%, 100% 10%, 95% 15%, 100% 20%, 95% 25%, 100% 30%, 95% 35%, 100% 40%, 95% 45%, 100% 50%, 95% 55%, 100% 60%, 95% 65%, 100% 70%, 95% 75%, 100% 80%, 95% 85%, 100% 90%, 95% 100%, 90% 95%, 85% 100%, 80% 95%, 75% 100%, 70% 95%, 65% 100%, 60% 95%, 55% 100%, 50% 95%, 45% 100%, 40% 95%, 35% 100%, 30% 95%, 25% 100%, 20% 95%, 15% 100%, 10% 95%, 5% 100%, 0% 90%, 5% 85%, 0% 80%, 5% 75%, 0% 70%, 5% 65%, 0% 60%, 5% 55%, 0% 50%, 5% 45%, 0% 40%, 5% 35%, 0% 30%, 5% 25%, 0% 20%, 5% 15%, 0% 10% ); } body[data-theme="pixel"] .contact-item, body[data-theme="pixel"] .skill-tag, body[data-theme="pixel"] .tech-stack span { background: #ffffff; border: 2px solid #000000; border-radius: 0; color: #000000; clip-path: polygon( 0% 15%, 5% 0%, 10% 10%, 15% 0%, 20% 10%, 25% 0%, 30% 10%, 35% 0%, 40% 10%, 45% 0%, 50% 10%, 55% 0%, 60% 10%, 65% 0%, 70% 10%, 75% 0%, 80% 10%, 85% 0%, 90% 10%, 95% 0%, 100% 15%, 95% 20%, 100% 25%, 95% 30%, 100% 35%, 95% 40%, 100% 45%, 95% 50%, 100% 55%, 95% 60%, 100% 65%, 95% 70%, 100% 75%, 95% 80%, 100% 85%, 95% 90%, 100% 95%, 95% 100%, 90% 95%, 85% 100%, 80% 95%, 75% 100%, 70% 95%, 65% 100%, 60% 95%, 55% 100%, 50% 95%, 45% 100%, 40% 95%, 35% 100%, 30% 95%, 25% 100%, 20% 95%, 15% 100%, 10% 95%, 5% 100%, 0% 85%, 5% 80%, 0% 75%, 5% 70%, 0% 65%, 5% 60%, 0% 55%, 5% 50%, 0% 45%, 5% 40%, 0% 35%, 5% 30%, 0% 25%, 5% 20%, 0% 15% ); box-shadow: none; } body[data-theme="pixel"] .download-pdf-btn { background: #ffffff; border: 3px solid #000000; color: #000000; border-radius: 0; clip-path: polygon( 0% 20%, 5% 0%, 10% 15%, 15% 0%, 20% 15%, 25% 0%, 30% 15%, 35% 0%, 40% 15%, 45% 0%, 50% 15%, 55% 0%, 60% 15%, 65% 0%, 70% 15%, 75% 0%, 80% 15%, 85% 0%, 90% 15%, 95% 0%, 100% 20%, 95% 25%, 100% 30%, 95% 35%, 100% 40%, 95% 45%, 100% 50%, 95% 55%, 100% 60%, 95% 65%, 100% 70%, 95% 75%, 100% 80%, 95% 85%, 100% 90%, 95% 95%, 100% 100%, 95% 100%, 90% 95%, 85% 100%, 80% 95%, 75% 100%, 70% 95%, 65% 100%, 60% 95%, 55% 100%, 50% 95%, 45% 100%, 40% 95%, 35% 100%, 30% 95%, 25% 100%, 20% 95%, 15% 100%, 10% 95%, 5% 100%, 0% 80%, 5% 75%, 0% 70%, 5% 65%, 0% 60%, 5% 55%, 0% 50%, 5% 45%, 0% 40%, 5% 35%, 0% 30%, 5% 25%, 0% 20% ); box-shadow: none; } body[data-theme="pixel"] .download-pdf-btn:hover { background: #f0f0f0; transform: translate(2px, 2px); } body[data-theme="pixel"] .meter-fill { background: #000000; border-radius: 0; clip-path: polygon( 0% 30%, 3% 0%, 6% 25%, 9% 0%, 12% 25%, 15% 0%, 18% 25%, 21% 0%, 24% 25%, 27% 0%, 30% 25%, 33% 0%, 36% 25%, 39% 0%, 42% 25%, 45% 0%, 48% 25%, 51% 0%, 54% 25%, 57% 0%, 60% 25%, 63% 0%, 66% 25%, 69% 0%, 72% 25%, 75% 0%, 78% 25%, 81% 0%, 84% 25%, 87% 0%, 90% 25%, 93% 0%, 96% 25%, 99% 0%, 100% 30%, 97% 35%, 100% 40%, 97% 45%, 100% 50%, 97% 55%, 100% 60%, 97% 65%, 100% 70%, 97% 100%, 94% 95%, 91% 100%, 88% 95%, 85% 100%, 82% 95%, 79% 100%, 76% 95%, 73% 100%, 70% 95%, 67% 100%, 64% 95%, 61% 100%, 58% 95%, 55% 100%, 52% 95%, 49% 100%, 46% 95%, 43% 100%, 40% 95%, 37% 100%, 34% 95%, 31% 100%, 28% 95%, 25% 100%, 22% 95%, 19% 100%, 16% 95%, 13% 100%, 10% 95%, 7% 100%, 4% 95%, 0% 100%, 0% 70%, 3% 65%, 0% 60%, 3% 55%, 0% 50%, 3% 45%, 0% 40%, 3% 35%, 0% 30% ); } /* 主题9 - 羊皮纸信件风格 */ body[data-theme="parchment"] { --neon-primary: #8b6914; --neon-secondary: #a0822d; --neon-accent: #6b4e0a; --neon-highlight: #c9a961; --neon-success: #8b6914; --dark-bg: #f4e4bc; --dark-surface: #e8d5a3; --dark-card: #f9f0d9; --text-primary: #3d2810; --text-secondary: #5c4220; --text-muted: #8b6f47; --neon-primary-rgba-03: rgba(139, 105, 20, 0.03); --neon-primary-rgba-05: rgba(139, 105, 20, 0.05); --neon-primary-rgba-1: rgba(139, 105, 20, 0.1); --neon-primary-rgba-2: rgba(139, 105, 20, 0.2); --neon-primary-rgba-3: rgba(139, 105, 20, 0.3); --neon-primary-rgba-4: rgba(139, 105, 20, 0.4); --neon-primary-rgba-5: rgba(139, 105, 20, 0.5); --neon-accent-rgba-05: rgba(107, 78, 10, 0.05); --neon-accent-rgba-1: rgba(107, 78, 10, 0.1); --neon-accent-rgba-2: rgba(107, 78, 10, 0.2); --neon-accent-rgba-3: rgba(107, 78, 10, 0.3); --neon-highlight-rgba-03: rgba(201, 169, 97, 0.03); } /* 羊皮纸风格特殊样式 - 做旧羊皮纸背景和撕边效果 */ body[data-theme="parchment"] { font-family: 'Georgia', 'Times New Roman', 'KaiTi', 'STKaiti', serif; background: /* 做旧污渍 */ radial-gradient(circle at 15% 25%, rgba(139, 105, 20, 0.08) 0%, transparent 25%), radial-gradient(circle at 85% 75%, rgba(107, 78, 10, 0.06) 0%, transparent 30%), radial-gradient(circle at 50% 50%, rgba(201, 169, 97, 0.04) 0%, transparent 40%), radial-gradient(circle at 30% 70%, rgba(139, 105, 20, 0.05) 0%, transparent 20%), radial-gradient(circle at 70% 30%, rgba(107, 78, 10, 0.04) 0%, transparent 25%), /* 纸张纹理 */ repeating-linear-gradient( 0deg, transparent, transparent 2px, rgba(139, 105, 20, 0.02) 2px, rgba(139, 105, 20, 0.02) 4px ), repeating-linear-gradient( 90deg, transparent, transparent 2px, rgba(201, 169, 97, 0.015) 2px, rgba(201, 169, 97, 0.015) 4px ), /* 基础羊皮纸色 */ linear-gradient(135deg, #f4e4bc 0%, #e8d5a3 50%, #f4e4bc 100%); background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 4px 4px, 4px 4px, 100% 100%; position: relative; min-height: 100vh; } body[data-theme="parchment"]::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: /* 更多做旧纹理 */ url('data:image/svg+xml;utf8,'), /* 纸张折痕 */ linear-gradient(90deg, transparent 79px, rgba(139, 105, 20, 0.15) 81px, transparent 81px), linear-gradient(#f4e4bc 0.1em, transparent 0.1em); background-size: 400px 400px, 100% 1.5em, 100% 1.5em; z-index: 0; pointer-events: none; opacity: 0.6; } body[data-theme="parchment"]::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 20% 30%, rgba(139, 105, 20, 0.1) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(107, 78, 10, 0.08) 0%, transparent 50%); z-index: 0; pointer-events: none; } body[data-theme="parchment"] .container { background: /* 纸张内部纹理 */ repeating-linear-gradient( 0deg, transparent, transparent 1px, rgba(139, 105, 20, 0.01) 1px, rgba(139, 105, 20, 0.01) 2px ), linear-gradient(135deg, #f9f0d9 0%, #f4e4bc 50%, #f9f0d9 100%); box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), inset 0 0 100px rgba(139, 105, 20, 0.05), inset 0 0 200px rgba(201, 169, 97, 0.03); border: none; border-radius: 0; padding: 4rem 3rem; position: relative; /* 撕边效果 */ clip-path: polygon( 0% 2%, 1% 0%, 3% 1.5%, 5% 0%, 7% 2%, 9% 0%, 11% 1.5%, 13% 0%, 15% 2%, 17% 0%, 19% 1.5%, 21% 0%, 23% 2%, 25% 0%, 27% 1.5%, 29% 0%, 31% 2%, 33% 0%, 35% 1.5%, 37% 0%, 39% 2%, 41% 0%, 43% 1.5%, 45% 0%, 47% 2%, 49% 0%, 51% 1.5%, 53% 0%, 55% 2%, 57% 0%, 59% 1.5%, 61% 0%, 63% 2%, 65% 0%, 67% 1.5%, 69% 0%, 71% 2%, 73% 0%, 75% 1.5%, 77% 0%, 79% 2%, 81% 0%, 83% 1.5%, 85% 0%, 87% 2%, 89% 0%, 91% 1.5%, 93% 0%, 95% 2%, 97% 0%, 99% 1.5%, 100% 0%, 100% 3%, 99% 5%, 100% 7%, 99% 9%, 100% 11%, 99% 13%, 100% 15%, 99% 17%, 100% 19%, 99% 21%, 100% 23%, 99% 25%, 100% 27%, 99% 29%, 100% 31%, 99% 33%, 100% 35%, 99% 37%, 100% 39%, 99% 41%, 100% 43%, 99% 45%, 100% 47%, 99% 49%, 100% 51%, 99% 53%, 100% 55%, 99% 57%, 100% 59%, 99% 61%, 100% 63%, 99% 65%, 100% 67%, 99% 69%, 100% 71%, 99% 73%, 100% 75%, 99% 77%, 100% 79%, 99% 81%, 100% 83%, 99% 85%, 100% 87%, 99% 89%, 100% 91%, 99% 93%, 100% 95%, 99% 97%, 100% 99%, 98% 100%, 96% 98%, 94% 100%, 92% 98%, 90% 100%, 88% 98%, 86% 100%, 84% 98%, 82% 100%, 80% 98%, 78% 100%, 76% 98%, 74% 100%, 72% 98%, 70% 100%, 68% 98%, 66% 100%, 64% 98%, 62% 100%, 60% 98%, 58% 100%, 56% 98%, 54% 100%, 52% 98%, 50% 100%, 48% 98%, 46% 100%, 44% 98%, 42% 100%, 40% 98%, 38% 100%, 36% 98%, 34% 100%, 32% 98%, 30% 100%, 28% 98%, 26% 100%, 24% 98%, 22% 100%, 20% 98%, 18% 100%, 16% 98%, 14% 100%, 12% 98%, 10% 100%, 8% 98%, 6% 100%, 4% 98%, 2% 100%, 0% 98%, 0% 96%, 2% 94%, 0% 92%, 2% 90%, 0% 88%, 2% 86%, 0% 84%, 2% 82%, 0% 80%, 2% 78%, 0% 76%, 2% 74%, 0% 70%, 2% 68%, 0% 64%, 2% 60%, 0% 56%, 2% 52%, 0% 48%, 2% 44%, 0% 40%, 2% 36%, 0% 32%, 2% 28%, 0% 24%, 2% 20%, 0% 16%, 2% 12%, 0% 8%, 2% 4%, 0% 2% ); } body[data-theme="parchment"] .container::after { content: ''; position: absolute; top: 0; left: 80px; width: 2px; height: 100%; background: linear-gradient( to bottom, transparent, rgba(139, 105, 20, 0.25) 10%, rgba(139, 105, 20, 0.25) 90%, transparent ); z-index: 1; box-shadow: 1px 0 2px rgba(139, 105, 20, 0.1); } body[data-theme="parchment"] .skill-card, body[data-theme="parchment"] .experience-item, body[data-theme="parchment"] .project-item, body[data-theme="parchment"] .education-item, body[data-theme="parchment"] .profile-header, body[data-theme="parchment"] .job-intention { background: repeating-linear-gradient( 0deg, transparent, transparent 1px, rgba(139, 105, 20, 0.01) 1px, rgba(139, 105, 20, 0.01) 2px ), linear-gradient(135deg, #f9f0d9 0%, #f4e4bc 100%); border: none; border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1), inset 0 0 50px rgba(139, 105, 20, 0.03), inset 0 0 100px rgba(201, 169, 97, 0.02); position: relative; /* 撕边效果 */ clip-path: polygon( 0% 3%, 2% 0%, 4% 2%, 6% 0%, 8% 3%, 10% 0%, 12% 2%, 14% 0%, 16% 3%, 18% 0%, 20% 2%, 22% 0%, 24% 3%, 26% 0%, 28% 2%, 30% 0%, 32% 3%, 34% 0%, 36% 2%, 38% 0%, 40% 3%, 42% 0%, 44% 2%, 46% 0%, 48% 3%, 50% 0%, 52% 2%, 54% 0%, 56% 3%, 58% 0%, 60% 2%, 62% 0%, 64% 3%, 66% 0%, 68% 2%, 70% 0%, 72% 3%, 74% 0%, 76% 2%, 78% 0%, 80% 3%, 82% 0%, 84% 2%, 86% 0%, 88% 3%, 90% 0%, 92% 2%, 94% 0%, 96% 3%, 98% 0%, 100% 2%, 100% 5%, 98% 7%, 100% 9%, 98% 11%, 100% 13%, 98% 15%, 100% 17%, 98% 19%, 100% 21%, 98% 23%, 100% 25%, 98% 27%, 100% 29%, 98% 31%, 100% 33%, 98% 35%, 100% 37%, 98% 39%, 100% 41%, 98% 43%, 100% 45%, 98% 47%, 100% 49%, 98% 51%, 100% 53%, 98% 55%, 100% 57%, 98% 59%, 100% 61%, 98% 63%, 100% 65%, 98% 67%, 100% 69%, 98% 71%, 100% 73%, 98% 75%, 100% 77%, 98% 79%, 100% 81%, 98% 83%, 100% 85%, 98% 87%, 100% 89%, 98% 91%, 100% 93%, 98% 95%, 100% 97%, 98% 100%, 96% 98%, 94% 100%, 92% 98%, 90% 100%, 88% 98%, 86% 100%, 84% 98%, 82% 100%, 80% 98%, 78% 100%, 76% 98%, 74% 100%, 72% 98%, 70% 100%, 68% 98%, 66% 100%, 64% 98%, 62% 100%, 60% 98%, 58% 100%, 56% 98%, 54% 100%, 52% 98%, 50% 100%, 48% 98%, 46% 100%, 44% 98%, 42% 100%, 40% 98%, 38% 100%, 36% 98%, 34% 100%, 32% 98%, 30% 100%, 28% 98%, 26% 100%, 24% 98%, 22% 100%, 20% 98%, 18% 100%, 16% 98%, 14% 100%, 12% 98%, 10% 100%, 8% 98%, 6% 100%, 4% 98%, 2% 100%, 0% 98%, 0% 95%, 2% 93%, 0% 91%, 2% 89%, 0% 87%, 2% 85%, 0% 83%, 2% 81%, 0% 79%, 2% 77%, 0% 75%, 2% 73%, 0% 71%, 2% 69%, 0% 67%, 2% 65%, 0% 61%, 2% 59%, 0% 55%, 2% 51%, 0% 47%, 2% 43%, 0% 39%, 2% 35%, 0% 31%, 2% 27%, 0% 23%, 2% 19%, 0% 15%, 2% 11%, 0% 7%, 2% 3%, 0% 3% ); } body[data-theme="parchment"] .skill-card::before, body[data-theme="parchment"] .experience-item::before, body[data-theme="parchment"] .project-item::before, body[data-theme="parchment"] .education-item::before, body[data-theme="parchment"] .profile-header::before, body[data-theme="parchment"] .job-intention::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient( 90deg, transparent, rgba(139, 105, 20, 0.25), transparent ); z-index: 1; } body[data-theme="parchment"] .skill-card::after, body[data-theme="parchment"] .experience-item::after, body[data-theme="parchment"] .project-item::after, body[data-theme="parchment"] .education-item::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(139, 105, 20, 0.05) 0%, transparent 30%), radial-gradient(circle at 80% 70%, rgba(107, 78, 10, 0.04) 0%, transparent 25%); pointer-events: none; z-index: 0; } body[data-theme="parchment"] .skill-card > *, body[data-theme="parchment"] .experience-item > *, body[data-theme="parchment"] .project-item > *, body[data-theme="parchment"] .education-item > *, body[data-theme="parchment"] .profile-header > *, body[data-theme="parchment"] .job-intention > * { position: relative; z-index: 2; } body[data-theme="parchment"] h1, body[data-theme="parchment"] h2, body[data-theme="parchment"] h3 { font-family: 'Georgia', 'KaiTi', 'STKaiti', serif; color: var(--neon-accent); text-shadow: 1px 1px 2px rgba(139, 105, 20, 0.2); font-weight: bold; letter-spacing: 1px; } body[data-theme="parchment"] .avatar { border: 3px solid rgba(139, 105, 20, 0.5); border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 0 30px rgba(139, 105, 20, 0.1); position: relative; clip-path: polygon( 0% 8%, 4% 0%, 8% 6%, 12% 0%, 16% 6%, 20% 0%, 24% 6%, 28% 0%, 32% 6%, 36% 0%, 40% 6%, 44% 0%, 48% 6%, 52% 0%, 56% 6%, 60% 0%, 64% 6%, 68% 0%, 72% 6%, 76% 0%, 80% 6%, 84% 0%, 88% 6%, 92% 0%, 96% 6%, 100% 0%, 100% 8%, 96% 12%, 100% 16%, 96% 20%, 100% 24%, 96% 28%, 100% 32%, 96% 36%, 100% 40%, 96% 44%, 100% 48%, 96% 52%, 100% 56%, 96% 60%, 100% 64%, 96% 68%, 100% 72%, 96% 76%, 100% 80%, 96% 84%, 100% 88%, 96% 92%, 100% 96%, 96% 100%, 92% 96%, 88% 100%, 84% 96%, 80% 100%, 76% 96%, 72% 100%, 68% 96%, 64% 100%, 60% 96%, 56% 100%, 52% 96%, 48% 100%, 44% 96%, 40% 100%, 36% 96%, 32% 100%, 28% 96%, 24% 100%, 20% 96%, 16% 100%, 12% 96%, 8% 100%, 4% 96%, 0% 100%, 0% 92%, 4% 88%, 0% 84%, 4% 80%, 0% 76%, 4% 72%, 0% 68%, 4% 64%, 0% 60%, 4% 56%, 0% 52%, 4% 48%, 0% 44%, 4% 40%, 0% 36%, 4% 32%, 0% 28%, 4% 24%, 0% 20%, 4% 16%, 0% 12%, 4% 8%, 0% 8% ); } body[data-theme="parchment"] .floating-bg { display: none; } body[data-theme="parchment"] .floating-item { display: none; } body[data-theme="parchment"] .contact-item, body[data-theme="parchment"] .skill-tag, body[data-theme="parchment"] .tech-stack span { background: rgba(139, 105, 20, 0.1); border: 1px solid rgba(139, 105, 20, 0.3); color: var(--neon-accent); } body[data-theme="parchment"] .meter-fill { background: linear-gradient(90deg, var(--neon-primary), var(--neon-accent)); box-shadow: inset 0 1px 3px rgba(139, 105, 20, 0.3); } body[data-theme="parchment"] .download-pdf-btn { background: linear-gradient(135deg, #f9f0d9 0%, #f4e4bc 100%); border: 2px solid rgba(139, 105, 20, 0.5); color: var(--neon-accent); border-radius: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), inset 0 0 30px rgba(139, 105, 20, 0.08); clip-path: polygon( 0% 5%, 3% 0%, 6% 4%, 9% 0%, 12% 4%, 15% 0%, 18% 4%, 21% 0%, 24% 4%, 27% 0%, 30% 4%, 33% 0%, 36% 4%, 39% 0%, 42% 4%, 45% 0%, 48% 4%, 51% 0%, 54% 4%, 57% 0%, 60% 4%, 63% 0%, 66% 4%, 69% 0%, 72% 4%, 75% 0%, 78% 4%, 81% 0%, 84% 4%, 87% 0%, 90% 4%, 93% 0%, 96% 4%, 99% 0%, 100% 5%, 100% 10%, 97% 15%, 100% 20%, 97% 25%, 100% 30%, 97% 35%, 100% 40%, 97% 45%, 100% 50%, 97% 55%, 100% 60%, 97% 65%, 100% 70%, 97% 75%, 100% 80%, 97% 85%, 100% 90%, 97% 95%, 100% 100%, 97% 100%, 94% 96%, 91% 100%, 88% 96%, 85% 100%, 82% 96%, 79% 100%, 76% 96%, 73% 100%, 70% 96%, 67% 100%, 64% 96%, 61% 100%, 58% 96%, 55% 100%, 52% 96%, 49% 100%, 46% 96%, 43% 100%, 40% 96%, 37% 100%, 34% 96%, 31% 100%, 28% 96%, 25% 100%, 22% 96%, 19% 100%, 16% 96%, 13% 100%, 10% 96%, 7% 100%, 4% 96%, 0% 100%, 0% 95%, 3% 90%, 0% 85%, 3% 80%, 0% 75%, 3% 70%, 0% 65%, 3% 60%, 0% 55%, 3% 50%, 0% 45%, 3% 40%, 0% 35%, 3% 30%, 0% 25%, 3% 20%, 0% 15%, 3% 10%, 0% 5% ); } body[data-theme="parchment"] .download-pdf-btn:hover { background: rgba(139, 105, 20, 0.15); border-color: var(--neon-primary); box-shadow: 0 4px 12px rgba(139, 105, 20, 0.3), inset 0 0 30px rgba(139, 105, 20, 0.08); } body[data-theme="parchment"] .ios-notification { background: linear-gradient(135deg, rgba(139, 105, 20, 0.9), rgba(201, 169, 97, 0.9)); border: 2px solid rgba(139, 105, 20, 0.5); color: var(--text-primary); } body[data-theme="parchment"] .theme-toggle { background: linear-gradient(135deg, rgba(139, 105, 20, 0.8), rgba(201, 169, 97, 0.8)); border: 2px solid var(--neon-primary); color: var(--text-primary); box-shadow: 0 4px 12px rgba(139, 105, 20, 0.3), inset 0 0 20px rgba(139, 105, 20, 0.1); } body[data-theme="parchment"] .theme-menu { background: var(--dark-card); border: 2px solid rgba(139, 105, 20, 0.4); box-shadow: 0 4px 16px rgba(139, 105, 20, 0.2), inset 0 0 30px rgba(139, 105, 20, 0.05); } body[data-theme="parchment"] .progress-bar { background: linear-gradient(90deg, var(--neon-primary), var(--neon-accent)); box-shadow: 0 2px 4px rgba(139, 105, 20, 0.2); } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', sans-serif; background: var(--dark-bg); color: var(--text-primary); line-height: 1.6; overflow-x: hidden; position: relative; min-height: 100vh; } /* ============================================ 动态粒子背景 ============================================ */ .floating-bg { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; overflow: hidden; pointer-events: none; } .floating-item { position: absolute; border-radius: 50%; background: radial-gradient(circle, var(--neon-primary), transparent); opacity: 0.3; animation: float 20s infinite ease-in-out; filter: blur(1px); } .floating-item:nth-child(1) { width: 80px; height: 80px; left: 10%; animation-delay: 0s; } .floating-item:nth-child(2) { width: 120px; height: 120px; left: 20%; animation-delay: 2s; } .floating-item:nth-child(3) { width: 60px; height: 60px; left: 30%; animation-delay: 4s; } .floating-item:nth-child(4) { width: 100px; height: 100px; left: 40%; animation-delay: 1s; } .floating-item:nth-child(5) { width: 90px; height: 90px; left: 50%; animation-delay: 3s; } .floating-item:nth-child(6) { width: 70px; height: 70px; left: 60%; animation-delay: 5s; } .floating-item:nth-child(7) { width: 110px; height: 110px; left: 70%; animation-delay: 2s; } .floating-item:nth-child(8) { width: 85px; height: 85px; left: 80%; animation-delay: 4s; } .floating-item:nth-child(9) { width: 95px; height: 95px; left: 90%; animation-delay: 1s; } .floating-item:nth-child(10) { width: 65px; height: 65px; left: 15%; animation-delay: 3s; } @keyframes float { 0%, 100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.3; } 25% { transform: translateY(-100px) translateX(50px) scale(1.2); opacity: 0.5; } 50% { transform: translateY(-200px) translateX(-30px) scale(0.8); opacity: 0.4; } 75% { transform: translateY(-150px) translateX(80px) scale(1.1); opacity: 0.6; } } /* 网格背景 */ body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(var(--neon-primary-rgba-03) 1px, transparent 1px), linear-gradient(90deg, var(--neon-primary-rgba-03) 1px, transparent 1px); background-size: 50px 50px; z-index: 0; pointer-events: none; animation: gridMove 20s linear infinite; } @keyframes gridMove { 0% { transform: translate(0, 0); } 100% { transform: translate(50px, 50px); } } /* 动态光效背景 */ body::after { content: ''; position: fixed; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle at 20% 50%, var(--neon-primary-rgba-05) 0%, transparent 50% ), radial-gradient( circle at 80% 80%, var(--neon-accent-rgba-05) 0%, transparent 50% ), radial-gradient( circle at 40% 20%, var(--neon-highlight-rgba-03) 0%, transparent 50% ); z-index: 0; pointer-events: none; animation: backgroundMove 30s ease-in-out infinite alternate; } @keyframes backgroundMove { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(10%, 10%) scale(1.1); } } /* ============================================ 容器布局 ============================================ */ .container { max-width: 1800px; margin: 0 auto; padding: 3rem 2rem; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr; gap: 3rem; } /* 不规则布局 - 使用CSS Grid的随机偏移 */ /* 不规则布局 - 使用随机偏移和旋转 */ header { grid-column: 1 / -1; transform: rotate(-0.8deg) translateX(-10px); margin-bottom: 1rem; } .skills { transform: rotate(0.6deg) translateX(20px); margin-left: 3rem; margin-top: 1rem; } .experience { transform: rotate(-0.4deg) translateX(-15px); margin-right: 2rem; margin-top: 2rem; } .projects { transform: rotate(0.7deg) translateX(25px); margin-left: 4rem; margin-top: 1.5rem; } .education { transform: rotate(-0.5deg) translateX(-20px); margin-right: 3rem; margin-top: 3rem; margin-bottom: 3rem; grid-column: 1 / -1; } /* ============================================ 头部区域 - 3D卡片效果 ============================================ */ header { position: relative; margin-bottom: 2rem; } .header-content { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; perspective: 1000px; } .header-left, .header-right { position: relative; } /* 3D卡片容器 */ .profile-header { display: flex; align-items: center; gap: 2.5rem; padding: 2.5rem; background: linear-gradient(135deg, var(--dark-card), var(--dark-surface)); border-radius: 24px; border: 1px solid var(--neon-primary-rgba-2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px var(--neon-primary-rgba-1), inset 0 0 60px var(--neon-primary-rgba-05); transform-style: preserve-3d; transition: all var(--transition-slow) cubic-bezier(0.23, 1, 0.32, 1); position: relative; overflow: hidden; } .profile-header::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient( from 0deg, transparent, var(--neon-primary-rgba-1), transparent 30%, transparent 70%, var(--neon-accent-rgba-1), transparent ); animation: rotate 8s linear infinite; z-index: 0; } .profile-header::after { content: ''; position: absolute; inset: 2px; background: linear-gradient(135deg, var(--dark-card), var(--dark-surface)); border-radius: 22px; z-index: 1; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .profile-header > * { position: relative; z-index: 2; } .profile-header:hover { transform: translateY(-10px) rotateX(5deg) rotateY(-5deg); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px var(--neon-primary-rgba-2), inset 0 0 80px var(--neon-primary-rgba-1); border-color: var(--neon-primary-rgba-4); } /* 头像 - 霓虹光环效果 */ .avatar-container { position: relative; width: 140px; height: 140px; } .avatar { width: 140px; height: 140px; border-radius: 50%; overflow: hidden; border: 3px solid transparent; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent)) padding-box, linear-gradient(135deg, var(--neon-primary), var(--neon-accent)) border-box; position: relative; cursor: pointer; transition: all var(--transition-normal); box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px var(--neon-accent-rgba-3), inset 0 0 30px var(--neon-primary-rgba-2); animation: glow 3s ease-in-out infinite alternate; } @keyframes glow { 0% { box-shadow: 0 0 30px rgba(0, 240, 255, 0.5), 0 0 60px rgba(139, 92, 246, 0.3), inset 0 0 30px rgba(0, 240, 255, 0.2); } 100% { box-shadow: 0 0 50px var(--neon-primary), 0 0 100px var(--neon-accent), inset 0 0 50px var(--neon-primary-rgba-3); } } .avatar::before { content: ''; position: absolute; inset: -5px; border-radius: 50%; background: conic-gradient( from 0deg, var(--neon-primary), var(--neon-accent), var(--neon-highlight), var(--neon-primary) ); z-index: -1; animation: rotate 3s linear infinite; opacity: 0.7; } .avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .avatar:hover img { transform: scale(1.1) rotate(5deg); } .avatar:hover { transform: scale(1.05); } /* 头像悬停预览 */ .avatar-hover-preview { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0); width: 300px; height: 300px; border-radius: 20px; overflow: hidden; border: 3px solid var(--neon-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8), 0 0 50px rgba(0, 240, 255, 0.6); opacity: 0; transition: all var(--transition-normal); z-index: 10000; pointer-events: none; } .avatar-container:hover .avatar-hover-preview { transform: translate(-50%, -50%) scale(1); opacity: 1; } .avatar-hover-preview img { width: 100%; height: 100%; object-fit: cover; } /* 名字和标题 */ .name-title { flex: 1; } .name-title h1 { font-family: 'Orbitron', sans-serif; font-size: 3rem; font-weight: 900; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent), var(--neon-highlight)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 1rem; text-shadow: 0 0 30px rgba(0, 240, 255, 0.5); letter-spacing: 2px; animation: textShimmer 3s ease-in-out infinite; } @keyframes textShimmer { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.3); } } #signature-container { font-size: 1.2rem; color: var(--neon-success); font-family: 'Inter', monospace; margin-bottom: 1rem; min-height: 2rem; text-shadow: 0 0 10px rgba(0, 255, 136, 0.5); } #signature { display: inline-block; } #cursor { display: inline-block; animation: blink 1s infinite; color: var(--neon-success); } @keyframes blink { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } } .subtitle { font-size: 1.1rem; color: var(--text-secondary); margin-top: 0.5rem; } /* 联系信息 - 霓虹按钮 */ .contact-info { display: flex; gap: 1.5rem; margin-top: 2rem; } .contact-item { display: flex; align-items: center; gap: 0.8rem; padding: 1rem 1.5rem; background: var(--neon-primary-rgba-05); border: 1px solid var(--neon-primary-rgba-3); border-radius: 12px; cursor: pointer; transition: all var(--transition-normal); position: relative; overflow: hidden; } .contact-item::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(139, 92, 246, 0.2)); opacity: 0; transition: opacity var(--transition-normal); } .contact-item:hover::before { opacity: 1; } .contact-item:hover { transform: translateY(-3px); border-color: var(--neon-primary); box-shadow: 0 10px 30px rgba(0, 240, 255, 0.3), 0 0 20px rgba(0, 240, 255, 0.2); } .contact-item i { font-size: 1.5rem; color: var(--neon-primary); position: relative; z-index: 1; transition: transform var(--transition-normal); } .contact-item:hover i { transform: scale(1.2) rotate(360deg); } .contact-text { position: relative; z-index: 1; } .contact-item span { color: var(--text-primary); font-family: 'Inter', monospace; font-weight: 500; } /* 求职意向卡片 */ .job-intention { padding: 2.5rem; background: linear-gradient(135deg, var(--dark-card), var(--dark-surface)); border-radius: 24px; border: 1px solid var(--neon-accent-rgba-2); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(139, 92, 246, 0.1); position: relative; overflow: hidden; transition: all var(--transition-slow); } .job-intention::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(139, 92, 246, 0.1), transparent ); transition: left 0.8s; } .job-intention:hover::before { left: 100%; } .job-intention:hover { transform: translateY(-5px); border-color: rgba(139, 92, 246, 0.5); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 60px rgba(139, 92, 246, 0.2); } .job-intention h3 { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; color: var(--neon-accent); margin-bottom: 1.5rem; text-shadow: 0 0 20px rgba(139, 92, 246, 0.5); } .intention-grid { display: grid; gap: 1.5rem; } .intention-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem; background: rgba(139, 92, 246, 0.05); border-radius: 12px; border-left: 3px solid var(--neon-accent); transition: all var(--transition-normal); } .intention-item:hover { background: rgba(139, 92, 246, 0.1); transform: translateX(10px); box-shadow: 0 5px 20px rgba(139, 92, 246, 0.2); } .intention-item i { color: var(--neon-accent); font-size: 1.5rem; margin-top: 0.2rem; } .intention-item .label { color: var(--text-secondary); font-weight: 500; } .intention-detail { display: flex; flex-direction: column; gap: 0.5rem; } .intention-item .primary { color: var(--neon-primary); font-weight: 600; font-size: 1.1rem; } .sub-skills { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .sub-skills span { padding: 0.3rem 0.8rem; background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 6px; color: var(--neon-primary); font-size: 0.85rem; transition: all var(--transition-normal); } .sub-skills span:hover { background: rgba(0, 240, 255, 0.2); transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 240, 255, 0.3); } /* ============================================ 技能卡片 - 3D翻转效果 ============================================ */ .skills { position: relative; } .skills h2 { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; margin-bottom: 2rem; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; position: relative; } .skills h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--neon-primary), transparent); animation: lineExpand 2s ease-in-out infinite; } @keyframes lineExpand { 0%, 100% { width: 100px; opacity: 0.5; } 50% { width: 200px; opacity: 1; } } .skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; perspective: 1000px; } .skill-card { background: linear-gradient(135deg, var(--dark-card), var(--dark-surface)); border-radius: 20px; padding: 2rem; border: 1px solid var(--neon-primary-rgba-2); position: relative; overflow: hidden; transform-style: preserve-3d; transition: all var(--transition-slow); cursor: pointer; } .skill-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient( circle, rgba(0, 240, 255, 0.1), transparent 70% ); opacity: 0; transition: opacity var(--transition-slow); } .skill-card:hover::before { opacity: 1; } .skill-card:hover { transform: translateY(-15px) rotateX(5deg) rotateY(-5deg); border-color: var(--neon-primary); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6), 0 0 50px rgba(0, 240, 255, 0.3), inset 0 0 40px rgba(0, 240, 255, 0.1); } .skill-icon { width: 70px; height: 70px; margin-bottom: 1.5rem; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(0, 240, 255, 0.2), rgba(139, 92, 246, 0.2)); border-radius: 16px; border: 2px solid rgba(0, 240, 255, 0.3); transition: all var(--transition-normal); } .skill-card:hover .skill-icon { transform: scale(1.1) rotate(5deg); border-color: var(--neon-primary); box-shadow: 0 0 30px rgba(0, 240, 255, 0.5); } .skill-icon i { font-size: 2rem; color: var(--neon-primary); transition: all var(--transition-normal); } .skill-card:hover .skill-icon i { transform: scale(1.2); filter: drop-shadow(0 0 10px var(--neon-primary)); } .skill-content h3 { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: var(--neon-primary); margin-bottom: 1rem; } .skill-tag { display: inline-block; padding: 0.4rem 1rem; margin: 0.3rem 0.3rem 0.3rem 0; background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 8px; color: var(--neon-primary); font-size: 0.9rem; transition: all var(--transition-normal); } .skill-tag:hover { background: rgba(0, 240, 255, 0.2); transform: translateY(-2px); box-shadow: 0 5px 15px rgba(0, 240, 255, 0.3); } .skill-content p { color: var(--text-secondary); margin: 1rem 0; line-height: 1.8; } .skill-meter { width: 100%; height: 8px; background: rgba(0, 240, 255, 0.1); border-radius: 10px; overflow: hidden; margin-top: 1rem; position: relative; } .meter-fill { height: 100%; background: linear-gradient(90deg, var(--neon-primary), var(--neon-accent)); border-radius: 10px; position: relative; animation: fillProgress 1.5s ease-out; box-shadow: 0 0 20px rgba(0, 240, 255, 0.5); } .meter-fill::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.3), transparent ); animation: shimmer 2s infinite; } @keyframes fillProgress { from { width: 0; } } @keyframes shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ============================================ 工作经历 - 时间轴设计 ============================================ */ .experience { position: relative; } .experience h2 { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; margin-bottom: 3rem; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; position: relative; } .experience h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--neon-primary), transparent); animation: lineExpand 2s ease-in-out infinite; } .experience-item { position: relative; padding: 2.5rem; margin-bottom: 2.5rem; background: linear-gradient(135deg, var(--dark-card), var(--dark-surface)); border-radius: 20px; border-left: 4px solid var(--neon-primary); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(0, 240, 255, 0.1); transition: all var(--transition-slow); overflow: hidden; } .experience-item::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple)); transform: scaleY(0); transform-origin: top; transition: transform var(--transition-slow); } .experience-item:hover::before { transform: scaleY(1); } .experience-item:hover { transform: translateX(10px); border-left-color: var(--neon-purple); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 240, 255, 0.2); } .company-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 1rem; } .company-header h3 { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; color: var(--neon-primary); text-shadow: 0 0 20px rgba(0, 240, 255, 0.3); } .date { padding: 0.5rem 1.2rem; background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 20px; color: var(--neon-primary); font-weight: 600; font-size: 0.9rem; } .position { font-size: 1.2rem; color: var(--neon-accent); margin-bottom: 1.5rem; font-weight: 600; } .content { color: var(--text-secondary); line-height: 1.8; } .content h4 { color: var(--neon-primary); margin: 1.5rem 0 1rem; font-size: 1.2rem; } .content ul { list-style: none; padding-left: 0; } .content li { padding: 0.8rem 0; padding-left: 2rem; position: relative; border-bottom: 1px solid rgba(0, 240, 255, 0.1); transition: all var(--transition-normal); } .content li::before { content: '▸'; position: absolute; left: 0; color: var(--neon-primary); font-weight: bold; } .content li:hover { padding-left: 2.5rem; color: var(--text-primary); } /* ============================================ 项目经历 - 卡片堆叠效果 ============================================ */ .projects { position: relative; } .projects h2 { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; margin-bottom: 3rem; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; position: relative; } .projects h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--neon-primary), transparent); animation: lineExpand 2s ease-in-out infinite; } .project-item { position: relative; padding: 2.5rem; margin-bottom: 2.5rem; background: linear-gradient(135deg, var(--dark-card), var(--dark-surface)); border-radius: 20px; border: 1px solid var(--neon-accent-rgba-2); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px rgba(139, 92, 246, 0.1); transition: all var(--transition-slow); overflow: hidden; } .project-item::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--neon-purple), var(--neon-pink), var(--neon-cyan)); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-slow); } .project-item:hover::before { transform: scaleX(1); } .project-item:hover { transform: translateY(-10px); border-color: var(--neon-accent); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 50px var(--neon-accent-rgba-3); } .project-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; } .project-header h3 { font-family: 'Orbitron', sans-serif; font-size: 1.8rem; color: var(--neon-accent); text-shadow: 0 0 20px rgba(139, 92, 246, 0.3); } .project-meta { padding: 0.5rem 1.2rem; background: rgba(139, 92, 246, 0.1); border: 1px solid rgba(139, 92, 246, 0.3); border-radius: 20px; color: var(--neon-accent); font-weight: 600; font-size: 0.9rem; } .project-desc { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 1.5rem; line-height: 1.8; } .project-details { display: grid; gap: 1.5rem; } .detail-item h4 { color: var(--neon-primary); margin-bottom: 1rem; font-size: 1.2rem; } .tech-stack { display: flex; flex-wrap: wrap; gap: 0.8rem; } .tech-stack span { padding: 0.5rem 1.2rem; background: rgba(0, 240, 255, 0.1); border: 1px solid rgba(0, 240, 255, 0.3); border-radius: 20px; color: var(--neon-primary); font-size: 0.9rem; font-weight: 500; transition: all var(--transition-normal); position: relative; overflow: hidden; } .tech-stack span::before { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(0, 240, 255, 0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s; } .tech-stack span:hover::before { width: 300px; height: 300px; } .tech-stack span:hover { transform: translateY(-3px) scale(1.05); border-color: var(--neon-primary); box-shadow: 0 5px 20px rgba(0, 240, 255, 0.4); z-index: 1; } /* ============================================ 教育经历 ============================================ */ .education { position: relative; } .education h2 { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; margin-bottom: 2rem; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; text-align: center; position: relative; } .education h2::after { content: ''; position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); width: 100px; height: 3px; background: linear-gradient(90deg, transparent, var(--neon-primary), transparent); animation: lineExpand 2s ease-in-out infinite; } .education-item { padding: 2.5rem; background: linear-gradient(135deg, var(--dark-card), var(--dark-surface)); border-radius: 20px; border: 1px solid var(--neon-primary); border-width: 2px; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.4), 0 0 30px var(--neon-primary); text-align: center; transition: all var(--transition-slow); opacity: 1 !important; transform: translateY(0) !important; position: relative; z-index: 10; } .education-item:hover { transform: translateY(-5px); border-color: var(--neon-primary); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px var(--neon-primary-rgba-2); } .edu-meta { font-size: 1.2rem; color: var(--text-secondary); } /* ============================================ 下载按钮 - 霓虹效果 ============================================ */ .download-pdf-btn { position: fixed; bottom: 3rem; right: 3rem; display: flex; align-items: center; gap: 1rem; padding: 1.2rem 2.5rem; background: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(139, 92, 246, 0.1)); backdrop-filter: blur(10px); border: 2px solid var(--neon-cyan); border-radius: 50px; color: var(--text-primary); text-decoration: none; font-weight: 600; font-size: 1.1rem; z-index: 1000; transition: all var(--transition-normal); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.3); overflow: hidden; animation: buttonPulse 2s ease-in-out infinite; } @keyframes buttonPulse { 0%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.3); } 50% { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 50px rgba(0, 240, 255, 0.6); } } .download-pdf-btn::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent)); opacity: 0; transition: opacity var(--transition-normal); z-index: -1; } .download-pdf-btn:hover::before { opacity: 0.2; } .download-pdf-btn:hover { transform: translateY(-5px) scale(1.05); border-color: var(--neon-accent); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 50px rgba(139, 92, 246, 0.5); animation: none; } .download-pdf-btn i { font-size: 1.5rem; color: var(--neon-primary); transition: transform var(--transition-normal); } .download-pdf-btn:hover i { transform: rotate(360deg) scale(1.2); } .download-pdf-btn span { position: relative; z-index: 1; } /* ============================================ 通知组件 ============================================ */ .ios-notification { position: fixed; top: 30px; left: 50%; transform: translateX(-50%) translateY(-150%); background: linear-gradient(135deg, rgba(0, 240, 255, 0.9), rgba(139, 92, 246, 0.9)); backdrop-filter: blur(10px); padding: 1rem 2rem; border-radius: 50px; display: flex; align-items: center; gap: 1rem; opacity: 0; transition: all var(--transition-normal); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px rgba(0, 240, 255, 0.5); z-index: 9999; border: 2px solid rgba(255, 255, 255, 0.3); } .ios-notification.show { transform: translateX(-50%) translateY(0); opacity: 1; } .notification-content { display: flex; align-items: center; gap: 1rem; color: white; } .notification-content i { font-size: 1.3rem; color: var(--neon-success); animation: checkmark 0.5s ease-out; } @keyframes checkmark { 0% { transform: scale(0) rotate(-45deg); } 50% { transform: scale(1.2) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); } } .notification-text { font-size: 1rem; font-weight: 600; } /* ============================================ 项目详细内容展开效果 ============================================ */ .project-ex-detail { margin-top: 1.5rem; max-height: 0; overflow: hidden; opacity: 0; transition: all var(--transition-slow); border-top: 1px solid rgba(0, 240, 255, 0.1); padding-top: 0; padding-bottom: 0; } .project-item:hover .project-ex-detail, .project-ex-detail.active { max-height: 2000px; opacity: 1; padding-top: 2rem; padding-bottom: 2rem; } .project-ex-detail .content h4 { color: var(--neon-success); margin-top: 1.5rem; margin-bottom: 0.8rem; font-size: 1.3rem; position: relative; padding-left: 1.5rem; } .project-ex-detail .content h4::before { content: '▶'; position: absolute; left: 0; color: var(--neon-success); animation: arrowPulse 2s ease-in-out infinite; } @keyframes arrowPulse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } } .project-ex-detail .content p { color: var(--text-secondary); line-height: 1.9; margin-bottom: 1rem; padding-left: 1.5rem; border-left: 2px solid var(--neon-success); transition: all var(--transition-normal); } .project-ex-detail .content p:hover { border-left-color: var(--neon-success); padding-left: 2rem; color: var(--text-primary); } /* ============================================ 主题切换器 ============================================ */ .theme-switcher { position: fixed; top: 3rem; right: 3rem; z-index: 10001; } .theme-toggle { width: 60px; height: 60px; border-radius: 50%; background: linear-gradient(135deg, var(--neon-primary), var(--neon-accent)); border: 2px solid var(--neon-primary); color: var(--text-primary); font-size: 1.5rem; cursor: pointer; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 30px var(--neon-primary); transition: all var(--transition-normal); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .theme-toggle::before { content: ''; position: absolute; inset: 0; background: conic-gradient( from 0deg, transparent, var(--neon-primary), transparent 30%, transparent 70%, var(--neon-accent), transparent ); animation: rotate 3s linear infinite; opacity: 0.5; } .theme-toggle:hover { transform: scale(1.1) rotate(180deg); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 50px var(--neon-primary); } .theme-toggle i { position: relative; z-index: 1; } .theme-menu { position: absolute; top: 70px; right: 0; display: none; flex-direction: column; gap: 0.8rem; background: var(--dark-card); padding: 1rem; border-radius: 20px; border: 2px solid var(--neon-primary); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px var(--neon-primary); min-width: 200px; } .theme-switcher:hover .theme-menu, .theme-menu.active { display: flex; animation: slideDown 0.3s ease-out; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .theme-option { width: 100%; height: 40px; border: 2px solid transparent; border-radius: 10px; background: var(--dark-surface); cursor: pointer; transition: all var(--transition-normal); padding: 0; overflow: hidden; position: relative; } .theme-option span { display: block; width: 100%; height: 100%; border-radius: 8px; transition: all var(--transition-normal); } .theme-option:hover { border-color: var(--neon-primary); transform: scale(1.05); box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4); } .theme-option:hover span { transform: scale(1.1); } .theme-option.active { border-color: var(--neon-primary); box-shadow: 0 0 20px var(--neon-primary), inset 0 0 20px rgba(255, 255, 255, 0.1); } /* ============================================ 响应式设计 ============================================ */ @media (max-width: 1200px) { .header-content { grid-template-columns: 1fr; } .container { grid-template-columns: 1fr; } } @media (max-width: 768px) { .container { padding: 2rem 1rem; } .name-title h1 { font-size: 2rem; } .skills-grid { grid-template-columns: 1fr; } .download-pdf-btn { bottom: 2rem; right: 2rem; padding: 1rem 1.5rem; font-size: 0.9rem; } .profile-header { flex-direction: column; text-align: center; } .contact-info { flex-direction: column; } } /* ============================================ 滚动条样式 ============================================ */ ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-track { background: var(--dark-bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--neon-cyan), var(--neon-purple)); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--neon-purple), var(--neon-pink)); } /* ============================================ 页面加载动画 ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } header, .skills, .experience, .projects, .education { animation: fadeInUp 0.8s ease-out; } .skill-card, .experience-item, .project-item { animation: fadeInUp 0.8s ease-out; animation-fill-mode: both; } .skill-card:nth-child(1) { animation-delay: 0.1s; } .skill-card:nth-child(2) { animation-delay: 0.2s; } .skill-card:nth-child(3) { animation-delay: 0.3s; } .skill-card:nth-child(4) { animation-delay: 0.4s; } .experience-item:nth-child(1) { animation-delay: 0.1s; } .experience-item:nth-child(2) { animation-delay: 0.2s; } .experience-item:nth-child(3) { animation-delay: 0.3s; } .project-item:nth-child(1) { animation-delay: 0.1s; } .project-item:nth-child(2) { animation-delay: 0.2s; } .project-item:nth-child(3) { animation-delay: 0.3s; } .project-item:nth-child(4) { animation-delay: 0.4s; } .project-item:nth-child(5) { animation-delay: 0.5s; }