/* ========================= 头部区域专用样式文件 - hero.css (SVG延迟淡入版) ========================= */ /* 庞门正道字体定义 */ @font-face { font-family: 'EchoScan'; src: url('data:font/ttf;base64,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') format('truetype'); font-display: swap; } /* ========================= CSS变量定义 - 提取重复的filter效果 ========================= */ :root { /* 光效变量 */ --glow-base-white: rgba(255, 255, 255, 0.5); --glow-base-blue: rgba(3, 17, 207, 0.671); --glow-base-white-light: rgba(255, 255, 255, 0.1); --glow-enhanced-white: rgba(255, 255, 255, 0.7); --glow-enhanced-blue: rgba(3, 17, 207, 0.8); --glow-enhanced-white-light: rgba(255, 255, 255, 0.2); /* 基础光效组合 */ --filter-glow-base: drop-shadow(0 0 4px var(--glow-base-white)) drop-shadow(0 0 8px var(--glow-base-blue)) drop-shadow(0 0 12px var(--glow-base-white-light)); /* 增强光效组合 */ --filter-glow-enhanced: drop-shadow(0 0 6px var(--glow-enhanced-white)) drop-shadow(0 0 12px var(--glow-enhanced-blue)) drop-shadow(0 0 18px var(--glow-enhanced-white-light)); /* 移动端光效 */ --filter-glow-mobile-base: drop-shadow(0 0 2px rgba(255, 255, 255, 0.4)) drop-shadow(0 0 4px rgba(3, 17, 207, 0.5)); --filter-glow-mobile-enhanced: drop-shadow(0 0 4px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 8px rgba(3, 17, 207, 0.7)); } /* ========================= 优化后的动画关键帧 ========================= */ /* 温和呼吸效果 */ @keyframes gentle-breathe { 0%, 100% { transform: scale(1); opacity: 1; filter: var(--filter-glow-base); } 50% { transform: scale(1.04); opacity: 0.75; filter: var(--filter-glow-enhanced); } } /* 组合呼吸悬浮效果 - 合并优化版 */ @keyframes breathe-float { 0%, 100% { transform: scale(1) translateY(0); opacity: 1; filter: var(--filter-glow-base); } 25% { transform: scale(1.01) translateY(-4px); opacity: 0.95; } 50% { transform: scale(1.02) translateY(-8px); opacity: 0.9; filter: var(--filter-glow-enhanced); } 75% { transform: scale(1.01) translateY(-4px); opacity: 0.95; } } /* 脉冲光效 - 桌面版 */ @keyframes pulse-glow { 0%, 100% { filter: var(--filter-glow-base); } 50% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8)) drop-shadow(0 0 16px rgba(3, 17, 207, 0.9)) drop-shadow(0 0 24px rgba(255, 255, 255, 0.3)); } } /* 移动端脉冲光效 */ @keyframes pulse-glow-mobile { 0%, 100% { filter: var(--filter-glow-mobile-base); } 50% { filter: var(--filter-glow-mobile-enhanced); } } /* ========================= SVG淡入动画 ========================= */ /* SVG淡入动画关键帧 - 优化版 */ @keyframes svg-fade-in { 0% { opacity: 0; transform: scale3d(0.95, 0.95, 1) translateZ(0); } 100% { opacity: 1; transform: scale3d(1, 1, 1) translateZ(0); } } /* SVG淡入动画类 */ .hero-logo-svg.svg-fade-in { animation: svg-fade-in 16.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; will-change: opacity, transform; backface-visibility: hidden; perspective: 1000px; } /* ========================= 纯粹淡入动画 ========================= */ /* 纯粹淡入动画关键帧 */ @keyframes pure-fade { 0% { opacity: 0; } 100% { opacity: 1; } } /* 纯粹淡入动画类 */ .letter.pure-fade { animation: pure-fade 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } /* ========================= 头部区域 - ECHOSCAN样式 ========================= */ .hero-section { height: 90vh; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; text-align: center; position: relative; padding-top: 60px; /* 从100px减少到60px，logo区域上移40px */ } .hero-title { font-family: 'EchoScan', 'Microsoft YaHei', sans-serif; font-size: 3rem; font-weight: 400; color: transparent; -webkit-text-stroke: 1.7px #ffffff; letter-spacing: 0.4rem; position: relative; margin-bottom: 1rem; margin-top: 0; backdrop-filter: blur(0.5px); text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; z-index: 2; /* 增强镂空效果的描边阴影 */ filter: var(--filter-glow-base); /* 禁止文字选中和拖拽 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; /* 禁止移动端长按高亮 */ -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; /* 点击样式 */ cursor: pointer; transition: all 0.3s ease; } .hero-title:hover { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5)); } .hero-logo-container { display: flex; flex-direction: column; align-items: center; position: relative; } .hero-logo-svg { width: 337px; height: auto; fill: none; stroke: #ffffff; stroke-width: 4; margin-bottom: -10px; position: relative; z-index: 1; /* 默认隐藏状态 */ opacity: 0; visibility: hidden; /* 硬件加速预设 */ transform: translateZ(0); will-change: opacity, transform; backface-visibility: hidden; } /* SVG路径样式 */ .hero-logo-svg path { stroke-linecap: round; stroke-linejoin: round; } /* ========================= 简化的动画效果类 ========================= */ /* 温和呼吸效果类 - 保留类定义但不再默认应用 */ .gentle-breathe { animation: gentle-breathe 5s ease-in-out infinite; } /* ========================= 描绘效果 ========================= */ .letter.draw-stroke { /* 保持原有的白色边框 */ -webkit-text-stroke: 1.7px #ffffff; /* 使用双重背景：底层纯色 + 上层渐变 */ background: linear-gradient(90deg, white 0%, white 60%, transparent 61%, transparent 100%), transparent; background-size: 0% 100%, 100% 100%; background-position: 0 0, 0 0; -webkit-background-clip: text, border-box; background-clip: text, border-box; animation: draw-effect 5s ease-in-out 1; /* 确保文字本身透明，只显示背景和边框 */ color: transparent; } /* 描绘效果动画 */ @keyframes draw-effect { 0% { background-size: 0% 100%, 100% 100%; background-position: 0% 0%, 0% 0%; } 50% { background-size: 100% 100%, 100% 100%; background-position: 0% 0%, 0% 0%; } 100% { background-size: 0% 100%, 100% 100%; background-position: 100% 0%, 0% 0%; } } /* ========================= 字母样式 ========================= */ /* 字母拆分后的样式 */ .hero-title .letter { display: inline-block; transition: all 0.3s ease; font-family: inherit; font-size: inherit; font-weight: inherit; color: inherit; -webkit-text-stroke: inherit; letter-spacing: inherit; /* 禁止文字选中 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .hero-title .letter.space { width: 0.4rem; } /* ========================= 液体点击效果 ========================= */ /* 液体效果动画关键帧 */ @keyframes liquid { 0%, 100% { transform: scaleY(1) scaleX(1); } 25% { transform: scaleY(1.1) scaleX(0.95); } 50% { transform: scaleY(0.9) scaleX(1.05); } 75% { transform: scaleY(1.05) scaleX(0.98); } } /* 液体效果类 */ .hero-title .letter.liquid { animation: liquid 2s ease-in-out both; transform-origin: center bottom; } /* ========================= 闪烁效果 ========================= */ /* 快速闪烁动画 - 闪烁两下 */ .quick-blink { animation: quick-blink 0.26s ease-in-out; } @keyframes quick-blink { 0% { opacity: 1; } 15% { opacity: 0.1; } 30% { opacity: 1; } 45% { opacity: 0.1; } 60% { opacity: 1; } 100% { opacity: 1; } } /* ========================= 副标题样式 ========================= */ .hero-subtitle { font-family: 'VT323', 'Fusion Pixel Font', 'Share Tech Mono', monospace; color: #ffffff; font-size: 1.3rem; opacity: 1; letter-spacing: 0.2em; display: block; /* 文字渲染优化 */ text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; /* 禁止文字选中和拖拽 */ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; /* 禁止移动端长按高亮 */ -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; /* 添加过渡效果 */ transition: all 0.3s ease; } /* ========================= 响应式调整 ========================= */ /* 🚫 移除大屏幕上的增强效果 */ @media (min-width: 1200px) { /* 不再为logo添加额外动画 */ } /* 🚫 移除移动设备的光效优化 */ @media (max-width: 768px) { /* 保持logo静态 */ } /* 减少动效偏好设置 */ @media (prefers-reduced-motion: reduce) { .gentle-breathe, .letter.pure-fade, .letter.liquid, .quick-blink, .hero-logo-svg.svg-fade-in { animation: none; } /* 对于减少动效偏好的用户，SVG直接显示 */ .hero-logo-svg { opacity: 1; visibility: visible; } }