227 lines
12 KiB
CSS
227 lines
12 KiB
CSS
|
/* ===== 东燊科技 Donsen — 未来科技感视觉层（fx.css）=====
|
|||
|
|
设计概念：现实与科幻交融
|
|||
|
|
- 深色板块 = 深空：半透明背景 + 星空画布 + 透视网格地板 + 辉光
|
|||
|
|
- 浅色板块 = 现实：明亮洁净，保留 HUD 细节点缀（角框 / 单色 kicker / 扫描线）
|
|||
|
|
- 全局动态：鼠标游走聚光 / 自定义光标 / 点击爆炸粒子 / 卡片 3D 倾斜 / 数字滚动
|
|||
|
|
尊重 prefers-reduced-motion 与 ?static=1（取证模式） */
|
|||
|
|
|
|||
|
|
:root{
|
|||
|
|
--cyan:#5BE9FF;
|
|||
|
|
--violet:#9D8CFF;
|
|||
|
|
--space-950:#040A16;
|
|||
|
|
--hud-line:rgba(91,155,255,.55);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------- 深空底 ---------- */
|
|||
|
|
body{
|
|||
|
|
background:
|
|||
|
|
radial-gradient(1100px 720px at 82% -12%, rgba(30,95,216,.20), transparent 60%),
|
|||
|
|
radial-gradient(900px 640px at -8% 108%, rgba(157,140,255,.12), transparent 55%),
|
|||
|
|
linear-gradient(180deg,var(--space-950),#06101F 42%,var(--space-950));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 星空画布：固定在内容之下（负 z-index：盖住 body 背景、被各板块背景遮盖） */
|
|||
|
|
#starfield{position:fixed;inset:0;z-index:-1;pointer-events:none;display:block}
|
|||
|
|
|
|||
|
|
/* 深色板块改半透明，让深空与星点透出来 */
|
|||
|
|
.hero{
|
|||
|
|
background:
|
|||
|
|
radial-gradient(860px 560px at 78% 8%, rgba(30,95,216,.30), transparent 62%),
|
|||
|
|
linear-gradient(160deg,rgba(6,15,34,.86) 0%,rgba(10,26,51,.80) 45%,rgba(16,37,74,.74) 100%);
|
|||
|
|
}
|
|||
|
|
.section-dark{background:linear-gradient(170deg,rgba(10,26,51,.88),rgba(6,15,34,.92))}
|
|||
|
|
.section-contact{background:linear-gradient(160deg,rgba(16,37,74,.86),rgba(4,10,22,.94))}
|
|||
|
|
|
|||
|
|
/* ---------- HERO 科幻件 ---------- */
|
|||
|
|
/* 透视网格地板：向观众方向滚动（外层静态透视，内层网格 translateY 纯合成动画，避免 background-position 每帧重绘） */
|
|||
|
|
.hero-floor{
|
|||
|
|
position:absolute;left:-20%;right:-20%;bottom:-4%;height:44%;pointer-events:none;
|
|||
|
|
transform:perspective(520px) rotateX(62deg);
|
|||
|
|
transform-origin:top center;
|
|||
|
|
mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent);
|
|||
|
|
-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 85%,transparent);
|
|||
|
|
}
|
|||
|
|
.hero-floor::before{
|
|||
|
|
content:'';position:absolute;left:0;right:0;top:-100%;bottom:-64px;
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(rgba(91,155,255,.22) 1px,transparent 1px),
|
|||
|
|
linear-gradient(90deg,rgba(91,155,255,.22) 1px,transparent 1px);
|
|||
|
|
background-size:64px 64px;
|
|||
|
|
animation:floorScroll 5.5s linear infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes floorScroll{from{transform:translateY(0)}to{transform:translateY(64px)}}
|
|||
|
|
|
|||
|
|
/* 扫描光束：周期性扫过首屏（transform 动画，避免布局属性触发 CLS/重排） */
|
|||
|
|
.hero-scan{
|
|||
|
|
position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none;overflow:hidden;
|
|||
|
|
}
|
|||
|
|
.hero-scan::before{
|
|||
|
|
content:'';position:absolute;left:-30%;right:-30%;height:180px;top:0;
|
|||
|
|
background:linear-gradient(180deg,transparent,rgba(91,233,255,.07) 45%,rgba(91,233,255,.14) 50%,transparent);
|
|||
|
|
filter:blur(2px);
|
|||
|
|
animation:scanSweep 7s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes scanSweep{0%{transform:translateY(-180px)}55%{transform:translateY(150vh)}100%{transform:translateY(150vh)}}
|
|||
|
|
|
|||
|
|
/* 视觉舱 HUD 角框 + 旋转轨道环（凤凰标识的能量场） */
|
|||
|
|
.hero-pod{position:relative}
|
|||
|
|
.hero-pod::before,.hero-pod::after{
|
|||
|
|
content:'';position:absolute;width:30px;height:30px;pointer-events:none;
|
|||
|
|
}
|
|||
|
|
.hero-pod::before{top:-1px;left:-1px;border-top:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:28px 0 0 0}
|
|||
|
|
.hero-pod::after{bottom:-1px;right:-1px;border-bottom:2px solid var(--cyan);border-right:2px solid var(--cyan);border-radius:0 0 28px 0}
|
|||
|
|
.pod-corner{position:absolute;width:30px;height:30px;pointer-events:none}
|
|||
|
|
.pod-corner.c-tr{top:-1px;right:-1px;border-top:2px solid var(--cyan);border-right:2px solid var(--cyan);border-radius:0 28px 0 0}
|
|||
|
|
.pod-corner.c-bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--cyan);border-left:2px solid var(--cyan);border-radius:0 0 0 28px}
|
|||
|
|
.hero-orbit{
|
|||
|
|
position:absolute;left:50%;top:36%;width:min(284px,68vw);aspect-ratio:1;pointer-events:none;
|
|||
|
|
border-radius:50%;
|
|||
|
|
background:conic-gradient(from 0deg,transparent 0 70%,rgba(91,233,255,.55) 84%,rgba(255,179,122,.65) 93%,transparent 100%);
|
|||
|
|
mask:radial-gradient(circle,transparent 60.5%,#000 62.5%,#000 65.5%,transparent 67%);
|
|||
|
|
-webkit-mask:radial-gradient(circle,transparent 60.5%,#000 62.5%,#000 65.5%,transparent 67%);
|
|||
|
|
animation:orbitSpin 12s linear infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes orbitSpin{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
|
|||
|
|
|
|||
|
|
/* 标语末尾终端光标 */
|
|||
|
|
.hero-slogan{position:relative;display:inline-block}
|
|||
|
|
.hero-slogan::after{
|
|||
|
|
content:'';display:inline-block;width:.5em;height:1em;margin-left:.18em;vertical-align:-.12em;
|
|||
|
|
background:var(--cyan);box-shadow:0 0 12px rgba(91,233,255,.8);
|
|||
|
|
animation:blink 1.1s steps(1) infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes blink{50%{opacity:0}}
|
|||
|
|
|
|||
|
|
/* 首屏数据条：等宽数字 + 微光 */
|
|||
|
|
.hero-stats .stat b{font-family:ui-monospace,Consolas,"Courier New",monospace;text-shadow:0 0 18px rgba(91,155,255,.55)}
|
|||
|
|
.hero-stats .stat span{font-family:ui-monospace,Consolas,monospace;letter-spacing:.5px}
|
|||
|
|
|
|||
|
|
/* ---------- 全局 HUD 细节 ---------- */
|
|||
|
|
/* 单色科技 kicker + 闪烁信号点 */
|
|||
|
|
.section-kicker{font-family:ui-monospace,Consolas,monospace;display:inline-flex;align-items:center;gap:8px}
|
|||
|
|
.section-kicker::before{
|
|||
|
|
content:'';width:7px;height:7px;border-radius:50%;background:var(--cyan);
|
|||
|
|
box-shadow:0 0 10px var(--cyan);animation:blink 1.6s steps(1) infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 按钮微光扫过（transform 驱动，skew 合并进同一 transform） */
|
|||
|
|
.btn{position:relative;overflow:hidden;isolation:isolate}
|
|||
|
|
.btn::after{
|
|||
|
|
content:'';position:absolute;top:0;bottom:0;left:0;width:60%;
|
|||
|
|
background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);
|
|||
|
|
transform:translateX(-200%) skewX(-18deg);transition:transform .55s ease;pointer-events:none;
|
|||
|
|
}
|
|||
|
|
.btn:hover::after{transform:translateX(225%) skewX(-18deg)}
|
|||
|
|
.btn-primary{border:1px solid rgba(91,233,255,.45);box-shadow:0 8px 30px rgba(30,95,216,.45),0 0 22px rgba(91,233,255,.18) inset}
|
|||
|
|
.btn-ghost{backdrop-filter:blur(6px)}
|
|||
|
|
|
|||
|
|
/* 卡片：指针跟随辉光 + 3D 倾斜底座（不常驻 will-change——transform 变化时浏览器自动提层，常驻 = 27 个合成层常驻显存） */
|
|||
|
|
.product,.tech-card,.case-card,.contact-card,.benefit-item{position:relative}
|
|||
|
|
.product::before,.tech-card::before,.case-card::before,.contact-card::before,.benefit-item::before{
|
|||
|
|
content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
|
|||
|
|
background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),rgba(91,155,255,.16),transparent 65%);
|
|||
|
|
opacity:0;transition:opacity .35s;
|
|||
|
|
}
|
|||
|
|
.product:hover::before,.tech-card:hover::before,.case-card:hover::before,.contact-card:hover::before,.benefit-item:hover::before{opacity:1}
|
|||
|
|
[data-tilt]{transform-style:preserve-3d;transition:transform .18s ease-out}
|
|||
|
|
|
|||
|
|
/* 产品状态 pill：呼吸微光（translateX 纯合成，替代 background-position 重绘） */
|
|||
|
|
.pill-status{position:relative;overflow:hidden}
|
|||
|
|
.pill-status::after{
|
|||
|
|
content:'';position:absolute;top:0;bottom:0;left:-60%;width:55%;border-radius:inherit;pointer-events:none;
|
|||
|
|
background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
|
|||
|
|
animation:pillSheen 3.2s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes pillSheen{0%{transform:translateX(0)}55%,100%{transform:translateX(320%)}}
|
|||
|
|
|
|||
|
|
/* 时间线节点：脉冲（伪元素 opacity/scale 纯合成，替代 box-shadow 逐帧重绘） */
|
|||
|
|
.tl-year::after{
|
|||
|
|
content:'';position:absolute;inset:-2px;border-radius:50%;pointer-events:none;
|
|||
|
|
box-shadow:0 0 0 8px rgba(46,124,246,.12);opacity:0;
|
|||
|
|
animation:tlPulse 2.8s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes tlPulse{0%,100%{opacity:0;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
|
|||
|
|
|
|||
|
|
/* 浅色板块的科幻点缀：细网格 + 顶部辉光 */
|
|||
|
|
.section-light{position:relative;overflow:hidden}
|
|||
|
|
.section-light::before{
|
|||
|
|
content:'';position:absolute;inset:0;pointer-events:none;
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(rgba(46,124,246,.05) 1px,transparent 1px),
|
|||
|
|
linear-gradient(90deg,rgba(46,124,246,.05) 1px,transparent 1px);
|
|||
|
|
background-size:52px 52px;
|
|||
|
|
mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 70%);
|
|||
|
|
-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 20%,transparent 70%);
|
|||
|
|
}
|
|||
|
|
.section-light::after{
|
|||
|
|
content:'';position:absolute;top:0;left:8%;right:8%;height:1px;pointer-events:none;
|
|||
|
|
background:linear-gradient(90deg,transparent,rgba(46,124,246,.5),transparent);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------- 鼠标效果 ---------- */
|
|||
|
|
/* 聚光灯：跟随指针的柔光（深色区可见） */
|
|||
|
|
#spotlight{
|
|||
|
|
position:fixed;top:0;left:0;width:640px;height:640px;margin:-320px 0 0 -320px;
|
|||
|
|
pointer-events:none;z-index:50;opacity:0;transition:opacity .6s;
|
|||
|
|
background:radial-gradient(circle,rgba(91,155,255,.10) 0%,rgba(91,155,255,.05) 35%,transparent 68%);
|
|||
|
|
}
|
|||
|
|
html.fx-on #spotlight{opacity:1}
|
|||
|
|
|
|||
|
|
/* 自定义光标：光点 + 滞后光环（仅在 fx 激活且精确指针设备） */
|
|||
|
|
.cursor-dot,.cursor-ring{position:fixed;top:0;left:0;pointer-events:none;z-index:10001;display:none}
|
|||
|
|
html.fx-on .cursor-dot,html.fx-on .cursor-ring{display:block}
|
|||
|
|
.cursor-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--cyan);box-shadow:0 0 12px var(--cyan)}
|
|||
|
|
.cursor-ring{
|
|||
|
|
width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;
|
|||
|
|
border:1.5px solid rgba(91,233,255,.75);
|
|||
|
|
transition:width .22s,height .22s,margin .22s,border-color .22s,opacity .22s;
|
|||
|
|
}
|
|||
|
|
.cursor-ring.is-hot{width:52px;height:52px;margin:-26px 0 0 -26px;border-color:rgba(255,255,255,.9)}
|
|||
|
|
html:not(.fx-on) .cursor-dot,html:not(.fx-on) .cursor-ring{display:none}
|
|||
|
|
@media (pointer:coarse){.cursor-dot,.cursor-ring{display:none!important}}
|
|||
|
|
|
|||
|
|
/* 隐藏原生光标（仅当 JS 光效激活时，避免脚本失效导致无光标） */
|
|||
|
|
html.fx-on,html.fx-on a,html.fx-on button,html.fx-on .lang-toggle{cursor:none}
|
|||
|
|
|
|||
|
|
/* 点击冲击波环 */
|
|||
|
|
.shockwave{
|
|||
|
|
position:fixed;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
|
|||
|
|
border:2px solid rgba(91,233,255,.9);pointer-events:none;z-index:10000;
|
|||
|
|
animation:shock .62s cubic-bezier(.16,.84,.44,1) forwards;
|
|||
|
|
}
|
|||
|
|
@keyframes shock{
|
|||
|
|
from{transform:scale(1);opacity:.95;border-width:3px}
|
|||
|
|
to{transform:scale(16);opacity:0;border-width:1px}
|
|||
|
|
}
|
|||
|
|
.shockwave.warm{border-color:rgba(255,179,122,.9)}
|
|||
|
|
|
|||
|
|
/* 爆炸粒子画布 */
|
|||
|
|
#fx-layer{position:fixed;inset:0;z-index:9999;pointer-events:none;display:block}
|
|||
|
|
|
|||
|
|
/* 全屏扫描线（极淡 CRT 质感；不用 mix-blend-mode——全屏混合会让下方所有动画层每帧重新混合） */
|
|||
|
|
.scanlines{
|
|||
|
|
position:fixed;inset:0;pointer-events:none;z-index:9998;
|
|||
|
|
background:repeating-linear-gradient(180deg,transparent 0 3px,rgba(91,155,255,.045) 3px 4px);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 导航底部能量线（translateX 纯合成） */
|
|||
|
|
.nav::after{
|
|||
|
|
content:'';position:absolute;left:0;bottom:-1px;height:1px;width:55%;
|
|||
|
|
background:linear-gradient(90deg,transparent,rgba(91,233,255,.55),rgba(46,124,246,.35),transparent);
|
|||
|
|
animation:navEnergy 5s ease-in-out infinite;
|
|||
|
|
}
|
|||
|
|
@keyframes navEnergy{0%{transform:translateX(-100%)}55%,100%{transform:translateX(182%)}}
|
|||
|
|
.nav-link.active{position:relative}
|
|||
|
|
.nav-link.active::after{
|
|||
|
|
content:'';position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;
|
|||
|
|
background:var(--cyan);box-shadow:0 0 8px var(--cyan);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* ---------- 取证/减动效模式：静态呈现 ---------- */
|
|||
|
|
@media (prefers-reduced-motion:reduce){
|
|||
|
|
.hero-floor,.hero-scan::before,.hero-orbit,.section-kicker::before,.hero-slogan::after,
|
|||
|
|
.pill-status::after,.tl-year,.nav::after,.btn::after,.pod-eq i,.eyebrow-dot{animation:none!important}
|
|||
|
|
.hero-floor{display:none}
|
|||
|
|
#starfield,#fx-layer,#spotlight,.scanlines,.cursor-dot,.cursor-ring{display:none!important}
|
|||
|
|
}
|