/* ============================================================ MG.AI · 世界级动效层（沉稳 + 动感） 仅新增类 / 关键帧，不改动原 style.css 的任何规则。 依赖 js/motion.js 在最早阶段给 打上 .js-anim。 ============================================================ */ /* 设计令牌：统一缓动与节奏 */ :root{ --ease-out: cubic-bezier(.22,.61,.36,1); --ease-soft: cubic-bezier(.34,.95,.5,1); --dur: .7s; --glow-amber: 0 10px 40px rgba(245,158,11,.28); --glow-teal: 0 10px 40px rgba(16,185,129,.25); } /* ---------- 顶部滚动进度条 ---------- */ .scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:9999; background:transparent; pointer-events:none; } .scroll-progress > i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,#f59e0b,#fbbf24 40%,#34e0b4); box-shadow:0 0 12px rgba(245,158,11,.6); transition:width .12s linear; } /* ---------- HERO 极光动态背景 ---------- */ .hero{ position:relative; overflow:hidden; } .hero .container.hero-grid{ position:relative; z-index:1; } .hero-aurora{ position:absolute; inset:-15% -10% auto -10%; height:130%; z-index:0; pointer-events:none; } .hero-aurora > span{ position:absolute; border-radius:50%; filter:blur(60px); opacity:.55; mix-blend-mode:multiply; will-change:transform; } .hero-aurora > span:nth-child(1){ width:46vw; height:46vw; left:-8vw; top:-6vw; background:radial-gradient(circle at 30% 30%, #fcd34d, transparent 62%); animation:auroraA 16s var(--ease-soft) infinite alternate; } .hero-aurora > span:nth-child(2){ width:40vw; height:40vw; right:-6vw; top:2vw; background:radial-gradient(circle at 60% 40%, #6ee7b7, transparent 62%); animation:auroraB 19s var(--ease-soft) infinite alternate; } .hero-aurora > span:nth-child(3){ width:34vw; height:34vw; left:32vw; top:-10vw; background:radial-gradient(circle at 50% 50%, #c4b5fd, transparent 60%); animation:auroraC 22s var(--ease-soft) infinite alternate; } .hero-grid-ov{ position:absolute; inset:0; display:block; background-image: linear-gradient(rgba(15,23,42,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.05) 1px, transparent 1px); background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); opacity:.5; animation:gridfloat 24s linear infinite; } @keyframes auroraA{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(6vw,4vh,0) scale(1.15) } } @keyframes auroraB{ from{ transform:translate3d(0,0,0) scale(1.05) } to{ transform:translate3d(-5vw,3vh,0) scale(.9) } } @keyframes auroraC{ from{ transform:translate3d(0,0,0) scale(.95) } to{ transform:translate3d(3vw,6vh,0) scale(1.2) } } @keyframes gridfloat{ from{ background-position:0 0,0 0 } to{ background-position:46px 46px,46px 46px } } /* HERO 主标题流光 */ .hero h1{ background:linear-gradient(100deg,#0f172a 25%,#f59e0b 48%,#34e0b4 60%,#0f172a 80%); background-size:220% auto; -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; animation:h1shimmer 7s linear infinite; will-change:background-position; } @keyframes h1shimmer{ to{ background-position:220% center } } /* HERO 浮动卡片轻微上下浮动 */ .float{ animation:floatY 5.5s ease-in-out infinite; } .float:nth-child(2){ animation-delay:.8s } .float:nth-child(3){ animation-delay:1.6s } .float:nth-child(4){ animation-delay:2.4s } @keyframes floatY{ 0%,100%{ translate:0 0 } 50%{ translate:0 -7px } } /* ---------- 滚动揭示（独立 data-reveal 机制） ---------- */ html.js-anim [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay:var(--rd,0s); /* 安全兜底：即便 JS 揭示观察器未触发 / 脚本异常，1.8s 后也自动显形， 绝不让任何栏目永久隐藏（国庆大图上下栏目"消失"即由此类卡死引起） */ animation:revealSafe .01s linear 1.8s forwards; } html.js-anim [data-reveal].is-in{ opacity:1; transform:none; } /* section 标题下划线生长 */ .section-head{ position:relative; } .section-head h2{ position:relative; display:inline-block; } .section-head h2::after{ content:""; position:absolute; left:50%; bottom:-12px; transform:translateX(-50%) scaleX(0); width:72px; height:3px; border-radius:3px; background:linear-gradient(90deg,#f59e0b,#fbbf24,#34e0b4); transition:transform .6s .18s var(--ease-out); } html.js-anim .section-head.is-in h2::after{ transform:translateX(-50%) scaleX(1); } /* ---------- 卡片悬浮聚光（cursor-follow） ---------- */ .spot{ position:relative; overflow:hidden; } .spot::after{ content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .35s ease; z-index:1; background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(245,158,11,.16), rgba(52,224,180,.06) 45%, transparent 62%); } .spot:hover::after{ opacity:1; } /* 卡片悬浮微抬升 + 描边辉光 */ .hub-card, .g-card, .decl, .panel, .product{ transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s ease; } .hub-card:hover, .g-card:hover, .decl:hover{ transform:translateY(-8px); box-shadow:0 22px 50px rgba(15,23,42,.16), var(--glow-amber); } /* ---------- 按钮：辉光扫光 + 微磁吸 ---------- */ .btn{ position:relative; overflow:hidden; transition:transform .25s var(--ease-out), box-shadow .3s ease; } .btn::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform:skewX(-18deg); transition:left .6s var(--ease-soft); pointer-events:none; } .btn:hover::before{ left:130%; } .btn-primary:hover, .btn-green:hover{ transform:translateY(-2px); box-shadow:var(--glow-amber); } /* 状态点呼吸 */ .status .dot, .ws-live .dot, .kbdot{ box-shadow:0 0 0 0 rgba(16,185,129,.55); animation:pulseDot 2s infinite; } @keyframes pulseDot{ 0%{ box-shadow:0 0 0 0 rgba(16,185,129,.5) } 70%{ box-shadow:0 0 0 10px rgba(16,185,129,0) } 100%{ box-shadow:0 0 0 0 rgba(16,185,129,0) } } /* ---------- 回到顶部 ---------- */ .to-top{ position:fixed; right:22px; bottom:22px; z-index:9000; width:48px; height:48px; border:none; border-radius:50%; cursor:pointer; display:grid; place-items:center; background:linear-gradient(135deg,#f59e0b,#fbbf24); color:#1a1205; font-size:20px; box-shadow:0 12px 30px rgba(245,158,11,.4); opacity:0; transform:translateY(16px) scale(.9); pointer-events:none; transition:opacity .35s var(--ease-out), transform .35s var(--ease-out); } .to-top.show{ opacity:1; transform:none; pointer-events:auto; } .to-top:hover{ transform:translateY(-3px) scale(1.05); } /* ---------- 数字滚动高亮 ---------- */ [data-count]{ font-variant-numeric:tabular-nums; } /* ---------- 公司简介·核心数据带 ---------- */ .kbstats{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:20px; } .kbstat{ padding:18px 14px; border-radius:16px; text-align:center; background:linear-gradient(160deg,#fffdf5,#fff7e6); border:1px solid var(--gold-edge); box-shadow:0 8px 24px rgba(15,23,42,.06); } .kbstat b{ display:block; font-size:30px; font-weight:800; line-height:1; color:var(--orange); font-variant-numeric:tabular-nums; } .kbstat span{ display:block; margin-top:8px; font-size:13px; color:var(--muted); } @media (max-width:560px){ .kbstats{ grid-template-columns:repeat(3,1fr); gap:8px } .kbstat b{ font-size:22px } } /* ---------- h1 流光：不支持 background-clip 时回退实色 ---------- */ @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .hero h1{ color:#0f172a; -webkit-text-fill-color:#0f172a; animation:none; } } /* 移动端降低极光模糊开销 */ @media (max-width:768px){ .hero-aurora > span{ filter:blur(38px); } .hero-grid-ov{ animation:none; } } /* ---------- 顶部公示跑马灯提速更顺滑（若原站有） ---------- */ .mq-track{ will-change:transform; } /* ---------- 算力引擎·全球节点实时负载（跑动负载条） ---------- */ .kbnodes{ display:grid; gap:10px; margin:6px 0 2px; } .kbnode{ display:grid; grid-template-columns:78px 1fr 54px; align-items:center; gap:12px; } .kbnode__tag{ font-size:12px; font-weight:800; color:#8b9bb3; letter-spacing:.02em; } .kbnode__bar{ height:10px; border-radius:6px; background:rgba(255,255,255,.09); overflow:hidden; } .kbnode__bar > i{ display:block; width:0; height:100%; border-radius:6px; background:linear-gradient(90deg,#34e0b4,#4f8dff); box-shadow:0 0 12px rgba(52,224,180,.45); transition:width .85s var(--ease-out); } .kbnode > b{ font-size:12px; color:#eaf1fa; font-variant-numeric:tabular-nums; text-align:right; } @media (max-width:560px){ .kbnode{ grid-template-columns:64px 1fr 46px; gap:8px } } /* ---------- 算力引擎·滚动联动 + 入场绘制 ---------- */ .kbeng__ring{ rotate: calc(var(--ek,0) * 16deg); } .kbeng__core{ rotate: calc(var(--ek,0) * -16deg); } .kbeng__dash{ position:relative; } .kbeng__dash.is-in .kbeng__chart{ animation:chartIn .9s var(--ease-out) both; } @keyframes chartIn{ from{ clip-path:inset(0 100% 0 0) } to{ clip-path:inset(0 0 0 0) } } .kbeng__chart{ position:relative; } .kbeng__chart::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(105deg, transparent 42%, rgba(52,224,180,.18) 50%, transparent 58%); background-size:220% 100%; background-position:calc(var(--ek,0) * -120%) 0; opacity:0; transition:opacity .5s ease; } .kbeng__dash.is-in .kbeng__chart::after{ opacity:1; } /* ---------- 公司简介：浅底深字（修复原浅字压浅底、文字不可见）---------- */ .kbabout{ background:linear-gradient(150deg,#f7fffb,#f5f8ff 45%,#f7f5ff) !important; border:1px solid rgba(15,23,42,.10) !important; box-shadow:0 18px 46px rgba(15,23,42,.10) !important; } .kbabout__title{ color:#0f172a !important; } .kbabout__body p{ color:#33415a !important; } .kbabout__body p:first-child{ color:#0f172a !important; } .kbabout__tags{ border-top:1px solid rgba(15,23,42,.10) !important; } .kbabout__tags span{ color:#3f4d63 !important; background:rgba(15,23,42,.04) !important; border:1px solid rgba(15,23,42,.12) !important; } .kbabout__tags span:first-child{ color:#047857 !important; background:rgba(16,185,129,.10) !important; border-color:rgba(16,185,129,.35) !important; } .kbstat{ background:linear-gradient(160deg,#ffffff,#fff8ec) !important; border:1px solid rgba(15,23,42,.10) !important; } .kbstat b{ color:#c2410c !important; } .kbstat span{ color:#5b6b82 !important; } /* ---------- GGAB 热爱点数 · 兑换特惠商品 ---------- */ .ggab{ display:grid; grid-template-columns:1.15fr .85fr; gap:18px; margin-top:10px; } .ggab__quiz{ display:grid; gap:14px; align-content:start; } .ggab__q{ position:relative; padding:20px 22px; border-radius:18px; background:linear-gradient(160deg,#fffdf5,#fff7e6); border:1px solid var(--gold-edge, #fde68a); } .ggab__q--point{ border-left:5px solid #10b981; } .ggab__q--traffic{ border-left:5px solid #f59e0b; } .ggab__tag{ display:inline-block; font-size:12px; font-weight:800; padding:4px 12px; border-radius:999px; margin-bottom:10px; } .ggab__q--point .ggab__tag{ background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; } .ggab__q--traffic .ggab__tag{ background:#fff7ed; color:#b45309; border:1px solid #fed7aa; } .ggab__q h4{ font-size:17px; font-weight:800; color:#0f172a; margin:0 0 8px; } .ggab__q p{ font-size:14px; line-height:1.85; color:#475569; margin:0; } .ggab__meter{ margin-top:12px; height:8px; border-radius:6px; background:rgba(15,23,42,.08); overflow:hidden; } .ggab__meter > i{ display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#34e0b4,#4f8dff); transition:width .8s var(--ease-out); } .ggab__meter span{ display:block; margin-top:6px; font-size:12px; color:#64748b; } .ggab__meter--flat > i{ background:linear-gradient(90deg,#f59e0b,#fbbf24); } .ggab__rule{ padding:20px 22px; border-radius:18px; background:linear-gradient(160deg,#f8fafc,#eef2f7); border:1px solid rgba(15,23,42,.10); } .ggab__rule h3{ font-size:16px; font-weight:800; color:#0f172a; margin:0 0 12px; } .ggab__list{ margin:0; padding-left:20px; } .ggab__list li{ font-size:14px; line-height:1.85; color:#334155; margin-bottom:9px; } .ggab__note{ margin-top:14px; padding:12px 14px; border-radius:12px; background:#fffbeb; border:1px solid #fde68a; font-size:12.5px; line-height:1.85; color:#78350f; } @media (max-width:860px){ .ggab{ grid-template-columns:1fr; } } /* ---------- 降噪：尊重系统偏好 ---------- */ @media (prefers-reduced-motion: reduce){ html.js-anim [data-reveal]{ opacity:1 !important; transform:none !important; transition:none !important; } .hero h1{ animation:none; -webkit-text-fill-color:#0f172a; color:#0f172a; background:none; } .hero-aurora > span, .hero-grid-ov, .float, .status .dot, .ws-live .dot, .kbdot{ animation:none !important; } .btn::before{ display:none; } }