/* ============================================================ site-chrome.css — 全站导航 / 页脚 / 动效公共样式 由 layout.js 动态注入；页面 中也应链接以避免 FOUC ============================================================ */ /* 倾斜切角精细按钮（带动画，用于主页面关键CTA） */ .cut-btn-premium { position: relative; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .cut-btn-premium:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 15px 30px -5px rgba(220, 38, 38, 0.3); } /* 静态切角按钮（无缩放/位移/阴影动画，用于即刻部署） */ .cut-btn-static { position: relative; clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%); transition: background-color 0.2s ease; } /* 导航链接 - 带动画红色下划线 */ .nav-link { position: relative; text-decoration: none; } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #dc2626; border-radius: 1px; transform: scaleX(0); transform-origin: left center; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .nav-link:hover::after { transform: scaleX(1); } .nav-link.nav-active::after { transform: scaleX(1); } /* 极极简网格背景 */ .premium-grid-bg { background-size: 40px 40px; background-image: linear-gradient(to right, rgba(9, 10, 15, 0.02) 1px, transparent 1px), linear-gradient(to bottom, rgba(9, 10, 15, 0.02) 1px, transparent 1px); } /* 激光微光带 */ .laser-stripe { background: linear-gradient(90deg, #dc2626 0%, #090a0f 50%, #dc2626 100%); background-size: 200% auto; animation: stripe-glow 4s linear infinite; } @keyframes stripe-glow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* 3D 容器基本设置 */ .tilt-element { transform-style: preserve-3d; perspective: 1000px; transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.3s ease, border-color 0.3s ease; } .tilt-child { transform: translateZ(25px); } /* 极极简红色氛围微弱呼吸 */ @keyframes red-glow-float { 0% { transform: translate(0, 0) scale(1); opacity: 0.15; } 50% { transform: translate(2%, -3%) scale(1.05); opacity: 0.25; } 100% { transform: translate(0, 0) scale(1); opacity: 0.15; } } .red-glow-ambient { animation: red-glow-float 15s infinite ease-in-out; } /* 滚动平滑入场动效 */ .reveal-element { opacity: 0; transform: translateY(30px) skewY(0.5deg); transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-element.active { opacity: 1; transform: translateY(0) skewY(0); } /* 渐次延时入场动画效果 - 用于四大卖点卡片与评价卡片 */ .stagger-card { opacity: 0; transform: translateY(40px) scale(0.96); transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease; } .stagger-card.active { opacity: 1; transform: translateY(0) scale(1); } /* ==================== Trae 风格页脚特定动画样式 ==================== */ /* 1. 精细页脚科技点阵 */ .footer-dot-grid { background-size: 24px 24px; background-image: radial-gradient(circle, rgba(9, 10, 15, 0.04) 1px, transparent 1px); } /* 2. 顶部撕裂能量扫描轨 */ .laser-glow-track { position: relative; width: 100%; height: 2px; background: rgba(9, 10, 15, 0.04); overflow: hidden; } .laser-glow-track::after { content: ''; position: absolute; top: 0; left: -150px; width: 250px; height: 100%; background: linear-gradient(90deg, transparent, #dc2626, transparent); animation: border-laser-sweep 5s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes border-laser-sweep { 0% { left: -250px; } 100% { left: 100%; } } /* 3. 激光切割斜角条带撕裂效果 (物理层叠错离) */ .footer-tear-divider { position: relative; height: 12px; background: repeating-linear-gradient(-45deg, #090a0f 0px, #090a0f 12px, #ffffff 12px, #ffffff 15px, #dc2626 15px, #dc2626 18px, #ffffff 18px, #ffffff 30px); clip-path: polygon(0% 20%, 100% 0%, 100% 80%, 0% 100%); transform: translateY(1px); transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), clip-path 0.6s cubic-bezier(0.16, 1, 0.3, 1); } #interactive-footer:hover .footer-tear-divider { transform: translateY(1px) skewX(-12deg) scaleY(1.3); clip-path: polygon(0% 10%, 100% 0%, 100% 90%, 0% 100%); } /* 4. Logo 撕裂幻影 */ .logo-text-glitch { transition: transform 0.3s ease; } .logo-box-glitch { transition: transform 0.3s ease, box-shadow 0.3s ease; } .group:hover .logo-text-glitch { animation: text-shred 0.4s steps(2) infinite; } .group:hover .logo-box-glitch { animation: box-shred 0.4s steps(2) infinite; } @keyframes text-shred { 0% { transform: translate(1px, -0.5px) skewX(1deg); } 50% { transform: translate(-1px, 0.5px) skewX(-1deg); } 100% { transform: translate(0px, 0px); } } @keyframes box-shred { 0% { transform: translate(-1px, 1px) rotate(1deg); } 50% { transform: translate(1px, -1px) rotate(-1deg); } 100% { transform: translate(0px, 0px); } } /* 滚动条定制 */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: #ffffff; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: #dc2626; } /* 滚动入场（Intersection Observer 添加 .visible） */ .fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.7s, transform 0.7s; } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .stagger-card, .reveal-element, .fade-in { opacity: 1 !important; transform: none !important; } }