/* ============================================================ * 前台样式 static/css/style.css —— 「赛博朋克 / CYBERPUNK」主题 * ------------------------------------------------------------ * 设计语言： * - 深色底 + 霓虹三色：电光蓝 / 洋红 / 荧光绿 * - 全屏扫描线 + 信号噪点 + 透视网格背景（CRT 显示器质感） * - 标题故障（Glitch）抖动效果、霓虹描边卡片、悬浮发光 * - 等宽字体点缀，科技终端氛围 * 主题切换： 上的 CSS 变量， * 深色为标准赛博朋克夜色，浅色为「霓虹日光」变体 * ============================================================ */ /* ---------- 主题变量：深色（默认） ---------- */ :root, html[data-theme="dark"] { --neon-blue: #00f0ff; --neon-magenta: #ff2a6d; --neon-green: #39ff14; --bg: #0a0a12; --bg-card: rgba(14, 16, 28, 0.82); --border: rgba(0, 240, 255, 0.35); --border-dim: rgba(0, 240, 255, 0.16); --text: #d8e4ff; --text-sub: #7d89b0; --accent: #00f0ff; --accent-hover: #6ff7ff; --accent-soft: rgba(0, 240, 255, 0.10); --radius: 4px; --glow-blue: 0 0 10px rgba(0, 240, 255, 0.55); --glow-card: 0 0 14px rgba(0, 240, 255, 0.22); --glow-lift: 0 0 22px rgba(0, 240, 255, 0.40); --grid-color: rgba(0, 240, 255, 0.05); --scan-opacity: 0.55; --font-mono: Consolas, 'Courier New', 'Microsoft YaHei', monospace; } /* ---------- 主题变量：浅色（霓虹日光变体） ---------- */ html[data-theme="light"] { --neon-blue: #0077cc; --neon-magenta: #d6006e; --neon-green: #0a9c1e; --bg: #e9edf6; --bg-card: rgba(255, 255, 255, 0.86); --border: rgba(0, 119, 204, 0.40); --border-dim: rgba(0, 119, 204, 0.20); --text: #101a30; --text-sub: #55617e; --accent: #0077cc; --accent-hover: #005a9e; --accent-soft: rgba(0, 119, 204, 0.10); --glow-blue: 0 0 8px rgba(0, 119, 204, 0.35); --glow-card: 0 4px 14px rgba(0, 119, 204, 0.14); --glow-lift: 0 0 18px rgba(0, 119, 204, 0.28); --grid-color: rgba(0, 119, 204, 0.06); --scan-opacity: 0.25; --font-mono: Consolas, 'Courier New', 'Microsoft YaHei', monospace; } /* ---------- 基础 ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--text); font-family: 'Segoe UI', 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif; font-size: 15px; line-height: 1.8; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-wrap: break-word; overflow-x: hidden; min-height: 100vh; /* 深色底 + 透视网格（两条 1px 渐变画出方格） */ background-color: var(--bg); background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 42px 42px; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); } img { max-width: 100%; height: auto; border-radius: 6px; } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); } #hero, #projects, #skills, #about { scroll-margin-top: 76px; } /* ============================================================ * CRT 质感：扫描线 + 信号噪点（固定覆盖层，不拦截点击） * ============================================================ */ /* 扫描线：横向细线铺满全屏 */ body::before { content: ''; position: fixed; inset: 0; z-index: 9998; pointer-events: none; opacity: var(--scan-opacity); background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.22) 0px, rgba(0, 0, 0, 0.22) 1px, transparent 1px, transparent 3px ); } /* 噪点：两组错位的小圆点，加轻微抖动动画模拟信号干扰 */ body::after { content: ''; position: fixed; inset: 0; z-index: 9997; pointer-events: none; opacity: 0.05; background-image: radial-gradient(rgba(255, 255, 255, 0.9) 1px, transparent 1px), radial-gradient(rgba(255, 255, 255, 0.6) 1px, transparent 1px); background-size: 3px 3px, 5px 5px; background-position: 0 0, 2px 3px; animation: noise-shift 0.4s steps(4) infinite; } @keyframes noise-shift { 0% { background-position: 0 0, 2px 3px; } 25% { background-position: 1px 2px, 3px 1px; } 50% { background-position: 2px 1px, 1px 4px; } 75% { background-position: 3px 3px, 0 2px; } 100% { background-position: 0 0, 2px 3px; } } /* ============================================================ * Glitch 故障文字效果 * 原理：::before / ::after 复制 data-text 属性里的文字， * 蓝红双色错位 + clip-path 裁剪抖动 * ============================================================ */ .glitch { position: relative; display: inline-block; } .glitch::before, .glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; overflow: hidden; pointer-events: none; } .glitch::before { color: var(--neon-blue); text-shadow: -2px 0 var(--neon-blue); animation: glitch-shift 2.4s infinite linear alternate-reverse; } .glitch::after { color: var(--neon-magenta); text-shadow: 2px 0 var(--neon-magenta); animation: glitch-shift 1.7s infinite linear alternate; } @keyframes glitch-shift { 0% { clip-path: inset(20% 0 60% 0); transform: translate(-2px, 1px); } 20% { clip-path: inset(60% 0 10% 0); transform: translate(2px, -1px); } 40% { clip-path: inset(10% 0 80% 0); transform: translate(-1px, 2px); } 60% { clip-path: inset(70% 0 5% 0); transform: translate(1px, -2px); } 80% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); } 100% { clip-path: inset(50% 0 30% 0); transform: translate(2px, 1px); } } /* ============================================================ * 顶部导航 * ============================================================ */ .site-head { position: sticky; top: 0; z-index: 30; background: rgba(10, 10, 18, 0.88); border-bottom: 1px solid var(--neon-blue); box-shadow: 0 0 14px rgba(0, 240, 255, 0.30); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } html[data-theme="light"] .site-head { background: rgba(233, 237, 246, 0.9); } .head-inner { display: flex; align-items: center; justify-content: space-between; height: 60px; } .logo { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 18px; font-weight: 700; letter-spacing: 1px; color: var(--neon-blue); text-shadow: var(--glow-blue); } .logo-mark { width: 10px; height: 10px; border-radius: 2px; background: var(--neon-green); box-shadow: 0 0 10px var(--neon-green); } .site-nav { display: flex; align-items: center; gap: 20px; font-family: var(--font-mono); font-size: 14px; } .site-nav a { color: var(--text-sub); transition: color .15s, text-shadow .15s; } .site-nav a:hover, .site-nav a.active { color: var(--neon-green); text-shadow: 0 0 8px var(--neon-green); } .theme-btn, .menu-btn { padding: 6px 14px; font-size: 13px; font-family: var(--font-mono); color: var(--neon-green); background: transparent; border: 1px solid var(--neon-green); border-radius: 4px; cursor: pointer; transition: all .18s; } .theme-btn:hover, .menu-btn:hover { color: #05050c; background: var(--neon-green); box-shadow: 0 0 14px var(--neon-green); } .menu-btn { display: none; } /* ============================================================ * 首屏板块 * ============================================================ */ .hero { padding: 80px 0 66px; text-align: center; } /* 头像：霓虹描边圆环 + 内发光 */ .hero-avatar { width: 94px; height: 94px; margin: 0 auto 22px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-family: var(--font-mono); font-size: 36px; font-weight: 700; color: var(--neon-blue); background: rgba(0, 240, 255, 0.05); border: 2px solid var(--neon-blue); text-shadow: 0 0 14px var(--neon-blue); box-shadow: 0 0 22px rgba(0, 240, 255, 0.35), inset 0 0 22px rgba(0, 240, 255, 0.12); } .hero-hello { margin: 0 0 6px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 5px; color: var(--neon-green); text-shadow: 0 0 8px var(--neon-green); } .hero-name { margin: 0 0 16px; font-size: 44px; line-height: 1.25; letter-spacing: 2px; color: var(--neon-blue); text-shadow: 0 0 18px rgba(0, 240, 255, 0.55); } .hero-intro { max-width: 640px; margin: 0 auto 26px; font-size: 16px; color: var(--text-sub); } .hero-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 32px; } /* 标签：霓虹描边胶囊 */ .tag { padding: 4px 14px; font-family: var(--font-mono); font-size: 13px; color: var(--neon-blue); background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; text-shadow: 0 0 6px rgba(0, 240, 255, 0.5); } .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; } /* ---------- 按钮：霓虹描边，悬浮填充 ---------- */ .btn { display: inline-block; padding: 11px 24px; font-family: var(--font-mono); font-size: 14px; letter-spacing: 1px; border-radius: 4px; border: 1px solid transparent; transition: all .18s; } .btn-primary { color: var(--neon-blue); background: transparent; border-color: var(--neon-blue); box-shadow: var(--glow-blue), inset 0 0 10px rgba(0, 240, 255, 0.12); } .btn-primary:hover { color: #05050c; background: var(--neon-blue); box-shadow: 0 0 22px var(--neon-blue); } .btn-ghost { color: var(--neon-magenta); border-color: var(--neon-magenta); background: transparent; } .btn-ghost:hover { color: #05050c; background: var(--neon-magenta); box-shadow: 0 0 18px var(--neon-magenta); } /* ============================================================ * 内容板块 * ============================================================ */ .section { padding: 68px 0; text-align: center; border-top: 1px solid var(--border-dim); } .section-alt { background: linear-gradient(180deg, rgba(0, 240, 255, 0.03), rgba(255, 42, 109, 0.03)); } .section-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 8px; font-family: var(--font-mono); font-size: 22px; color: var(--neon-magenta); text-shadow: 0 0 8px rgba(255, 42, 109, 0.55); } /* 序号：荧光绿终端样式 [ 01 ] */ .section-title span { display: inline-flex; align-items: center; padding: 2px 10px; font-size: 12px; letter-spacing: 2px; color: var(--neon-green); background: rgba(57, 255, 20, 0.08); border: 1px solid var(--neon-green); border-radius: 3px; text-shadow: 0 0 6px var(--neon-green); } .section-sub { max-width: 520px; margin: 0 auto 36px; font-family: var(--font-mono); font-size: 13.5px; color: var(--text-sub); } .empty-tip { padding: 40px 20px; font-family: var(--font-mono); color: var(--neon-green); background: rgba(57, 255, 20, 0.04); border: 1px dashed var(--neon-green); border-radius: var(--radius); text-shadow: 0 0 6px rgba(57, 255, 20, 0.5); } /* ============================================================ * 项目卡片：霓虹描边 + 悬浮故障抖动 + 边框变色 * ============================================================ */ .project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; text-align: left; } .project-card { position: relative; overflow: hidden; padding: 22px 24px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--glow-card), inset 0 0 24px rgba(0, 240, 255, 0.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .25s; } /* 悬浮：变洋红描边 + 轻微故障抖动 */ .project-card:hover { border-color: var(--neon-magenta); box-shadow: 0 0 18px rgba(255, 42, 109, 0.40); animation: card-glitch 0.35s infinite; } @keyframes card-glitch { 0% { transform: translate(0, 0); } 25% { transform: translate(-1px, 1px); } 50% { transform: translate(1px, -1px); } 75% { transform: translate(-1px, -1px); } 100% { transform: translate(1px, 1px); } } .project-name { margin: 0 0 8px; font-family: var(--font-mono); font-size: 17px; color: var(--neon-blue); text-shadow: 0 0 8px rgba(0, 240, 255, 0.5); } /* 名称前的终端提示符 */ .project-name::before { content: '> '; color: var(--neon-green); text-shadow: 0 0 6px var(--neon-green); } .project-desc { margin: 0; font-size: 14px; color: var(--text-sub); } /* ============================================================ * 技术栈 * ============================================================ */ .skill-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; text-align: left; } .skill-group { padding: 20px 22px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--glow-card), inset 0 0 24px rgba(0, 240, 255, 0.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color .2s, box-shadow .25s; } .skill-group:hover { border-color: var(--neon-green); box-shadow: 0 0 16px rgba(57, 255, 20, 0.28); } .skill-group-name { display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding-bottom: 10px; font-family: var(--font-mono); font-size: 15px; color: var(--neon-green); text-shadow: 0 0 6px rgba(57, 255, 20, 0.5); border-bottom: 1px dashed var(--border); } .skill-group-name::before { content: '$'; color: var(--neon-magenta); text-shadow: 0 0 6px var(--neon-magenta); } .skill-items { display: flex; flex-wrap: wrap; gap: 8px; } .skill-item { padding: 4px 13px; font-family: var(--font-mono); font-size: 13px; color: var(--text); background: rgba(0, 240, 255, 0.05); border: 1px solid var(--border-dim); border-radius: 3px; transition: all .15s; } .skill-item:hover { color: var(--neon-blue); border-color: var(--neon-blue); box-shadow: 0 0 10px rgba(0, 240, 255, 0.35); text-shadow: 0 0 6px var(--neon-blue); } /* ============================================================ * 关于我 * ============================================================ */ .about-wrap { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 26px; align-items: start; text-align: left; } .about-wrap .section-title { justify-content: flex-start; } .about-wrap .section-sub { margin: 0 0 16px; text-align: left; } .about-paragraph { margin: 0; font-size: 15px; color: var(--text-sub); padding: 22px 24px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--neon-blue); border-radius: var(--radius); box-shadow: var(--glow-card); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .about-side { display: flex; flex-direction: column; gap: 16px; } .side-box { padding: 18px 20px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--neon-magenta); border-radius: var(--radius); box-shadow: 0 0 14px rgba(255, 42, 109, 0.18); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .side-box-title { margin: 0 0 10px; padding-bottom: 8px; font-family: var(--font-mono); font-size: 14px; color: var(--neon-magenta); text-shadow: 0 0 6px rgba(255, 42, 109, 0.5); border-bottom: 1px dashed var(--border); } .direction-list { margin: 0; padding-left: 18px; font-size: 14px; color: var(--text-sub); } .direction-list li { margin: 4px 0; } .contact-text { margin: 0; font-family: var(--font-mono); font-size: 15px; color: var(--neon-green); text-shadow: 0 0 8px rgba(57, 255, 20, 0.5); } /* ============================================================ * 页脚 * ============================================================ */ .site-foot { padding: 28px 0 34px; text-align: center; font-family: var(--font-mono); border-top: 1px solid var(--neon-blue); box-shadow: 0 -4px 18px rgba(0, 240, 255, 0.12); background: rgba(0, 240, 255, 0.03); } .foot-brand { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: var(--neon-blue); text-shadow: var(--glow-blue); } /* ============================================================ * 响应式适配 * 电脑端（>900px）为默认样式，下面依次适配平板、手机、小屏手机 * ============================================================ */ /* ---------- 平板 / 小笔记本 ---------- */ @media (max-width: 900px) { .about-wrap { grid-template-columns: 1fr; } .hero { padding: 60px 0 50px; } .hero-name { font-size: 36px; } .project-grid, .skill-groups { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); } } /* ---------- 手机 ---------- */ @media (max-width: 760px) { .head-inner { height: auto; padding: 10px 0; flex-wrap: wrap; row-gap: 8px; } .menu-btn { display: inline-flex; align-items: center; min-height: 36px; } .site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 4px; padding: 10px 0 8px; border-top: 1px solid var(--border-dim); } .site-nav.open { display: flex; } .site-nav a { display: block; width: 100%; padding: 9px 2px; font-size: 15px; border-bottom: 1px solid var(--border-dim); } .site-nav a:last-of-type { border-bottom: none; } .theme-btn { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font-size: 14px; text-align: center; } .hero { padding: 46px 0 40px; } .hero-avatar { width: 78px; height: 78px; font-size: 30px; margin-bottom: 16px; } .hero-name { font-size: 30px; } .hero-intro { font-size: 15px; } .hero-hello { font-size: 11px; letter-spacing: 3px; } .hero-actions { gap: 10px; } .hero-actions .btn { flex: 1 1 auto; text-align: center; } .section { padding: 44px 0; } .section-title { font-size: 18px; } .section-sub { margin-bottom: 24px; } .project-grid, .skill-groups { grid-template-columns: 1fr; gap: 16px; } .project-card, .skill-group, .side-box, .about-paragraph { padding: 17px 18px; } /* 手机端关闭故障抖动动画，避免触发元素跳动 */ .project-card:hover { animation: none; } .site-foot { padding: 22px 0 26px; } } /* ---------- 小屏手机（4.7 寸以下） ---------- */ @media (max-width: 400px) { .wrap { padding: 0 14px; padding-left: max(14px, env(safe-area-inset-left)); padding-right: max(14px, env(safe-area-inset-right)); } .hero { padding: 36px 0 30px; } .hero-name { font-size: 26px; } .hero-intro { font-size: 14px; } .section { padding: 34px 0; } .section-title { font-size: 16px; } .project-card, .skill-group, .side-box, .about-paragraph { padding: 15px 16px; } .logo { font-size: 15px; } } /* ---------- 触摸设备：可点元素撑大到易点尺寸 ---------- */ @media (hover: none) and (pointer: coarse) { .btn, .theme-btn, .menu-btn { min-height: 42px; display: inline-flex; align-items: center; justify-content: center; } .btn-primary:hover { transform: none; } .project-card:hover { animation: none; } }