/* ============================================================ NEXUS AI Hardware — 动态效果层（共享：index.html / news.html） - 滚动进入视口动画（data-reveal / data-reveal-group） - Hero 入场序列 + 网格背景 + 扫描光束 + 浮动粒子 - 鼠标：光标辉光、卡片 3D 倾斜、视差、磁性按钮 - 返回顶部按钮 说明：所有隐藏态只在 下生效（JS 探测后启用）， 无 JS / 减弱动效环境下内容始终可见，不影响可访问性。 ============================================================ */ /* ---------- 滚动显现（reveal） ---------- */ .js-anim [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2, .65, .25, 1) var(--d, 0s); will-change: opacity, transform; } .js-anim [data-reveal].is-in { opacity: 1; transform: none; } .js-anim [data-reveal="left"] { transform: translateX(-40px); } .js-anim [data-reveal="left"].is-in { transform: none; } .js-anim [data-reveal="right"] { transform: translateX(40px); } .js-anim [data-reveal="right"].is-in { transform: none; } .js-anim [data-reveal-group] > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0s), transform .7s cubic-bezier(.2, .65, .25, 1) var(--d, 0s); will-change: opacity, transform; } .js-anim [data-reveal-group].is-in > * { opacity: 1; transform: none; } /* ---------- Hero 入场序列 ---------- */ @keyframes nexus-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } .js-anim .hero-badge { animation: nexus-rise .8s cubic-bezier(.2, .65, .25, 1) .05s backwards; } .js-anim .hero h1 { animation: nexus-rise .9s cubic-bezier(.2, .65, .25, 1) .15s backwards; } .js-anim .hero-sub { animation: nexus-rise .9s cubic-bezier(.2, .65, .25, 1) .30s backwards; } .js-anim .hero-actions{ animation: nexus-rise .9s cubic-bezier(.2, .65, .25, 1) .45s backwards; } .js-anim .hero-stats { animation: nexus-rise .9s cubic-bezier(.2, .65, .25, 1) .60s backwards; } /* 主标题绿色强调词的流光效果 */ .js-anim .hero h1 em { background: linear-gradient(100deg, var(--nvidia-green) 20%, var(--green-light) 45%, var(--nvidia-green) 70%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nexus-shimmer 4.5s linear infinite; } @keyframes nexus-shimmer { to { background-position: 220% 0; } } /* ---------- Hero 动态背景：网格 + 扫描光束 + 粒子 ---------- */ .hero-grid { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(118, 185, 0, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(118, 185, 0, .06) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(ellipse 95% 85% at 50% 30%, #000 25%, transparent 75%); mask-image: radial-gradient(ellipse 95% 85% at 50% 30%, #000 25%, transparent 75%); animation: nexus-grid-pan 16s linear infinite; } @keyframes nexus-grid-pan { to { background-position: 0 44px, 0 0; } } .hero-scan { position: absolute; left: 0; top: -22%; width: 100%; height: 150px; background: linear-gradient(180deg, transparent, rgba(118, 185, 0, .10), transparent); filter: blur(6px); pointer-events: none; animation: nexus-scan 7s ease-in-out infinite; } @keyframes nexus-scan { 0%, 100% { top: -22%; } 50% { top: 112%; } } .particle { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: var(--green-light); opacity: .3; pointer-events: none; left: var(--x); top: var(--y); animation: nexus-float var(--dur, 8s) ease-in-out var(--d, 0s) infinite; } @keyframes nexus-float { 0%, 100% { transform: translateY(0); opacity: .2; } 50% { transform: translateY(-44px); opacity: .55; } } /* ---------- 卡片悬浮辉光 ---------- */ .card, .article-card, .case { transition: border-color .25s ease, box-shadow .35s ease; } .js-anim .card:hover, .js-anim .article-card:hover, .js-anim .case:hover { border-color: rgba(118, 185, 0, .6); box-shadow: 0 10px 36px rgba(118, 185, 0, .13), 0 0 0 1px rgba(118, 185, 0, .30); } .card .ico { transition: transform .35s cubic-bezier(.2, .65, .25, 1); } .card:hover .ico { transform: rotate(-8deg) scale(1.1); } /* ---------- 导航下划线生长 ---------- */ .nav-links a { position: relative; } .nav-links a::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: var(--nvidia-green); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); } /* ---------- 鼠标：光标辉光 ---------- */ #cursor-glow { position: fixed; left: 0; top: 0; width: 320px; height: 320px; border-radius: 50%; pointer-events: none; z-index: 9999; mix-blend-mode: screen; background: radial-gradient(closest-side, rgba(118, 185, 0, .13), transparent 70%); opacity: 0; transition: opacity .4s ease; } body.glow-on #cursor-glow { opacity: 1; } /* ---------- 3D 倾斜卡片 ---------- */ [data-tilt] { transform-style: preserve-3d; transition: transform .5s cubic-bezier(.2, .65, .25, 1); } /* ---------- 返回顶部 ---------- */ #back-top { position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: var(--radius, 2px); border: 1px solid var(--gray-border, #5e5e5e); background: rgba(16, 16, 16, .92); color: var(--white, #fff); font-size: 18px; line-height: 1; cursor: pointer; z-index: 90; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .3s ease, transform .3s ease, border-color .2s ease, color .2s ease; } #back-top.show { opacity: 1; transform: none; pointer-events: auto; } #back-top:hover { border-color: var(--nvidia-green, #76b900); color: var(--green-light, #bff230); } /* ---------- 减弱动效偏好 ---------- */ @media (prefers-reduced-motion: reduce) { .js-anim [data-reveal], .js-anim [data-reveal-group] > * { opacity: 1 !important; transform: none !important; transition: none !important; } .js-anim .hero * { animation: none !important; } .js-anim .hero h1 em { animation: none; color: var(--nvidia-green); } #cursor-glow, .particle, .hero-scan { display: none !important; } #back-top { transition: none; } }