冰朔
de864945c1
冰朔反馈v3不转/无脉络/单调。修：SVG脉络层7条发光经脉（冷暖交织+辉光， width 200% 26s无缝环移=可见自转）；云带提速80s→26s并增强对比；mask放宽。 双动画同频26s。结构验证：veins 7 paths + fph-veins-flow/fph-surf-pan running。
294 lines
15 KiB
CSS
294 lines
15 KiB
CSS
/* 第一语言星球首页 v3 —— 立体悬浮星球：大爆炸中诞生，周围是等待开拓的黯淡星群 */
|
||
/* 轻量纯 CSS（球体三要素：高光偏移/暗面内阴影/纹理滚动），无依赖 */
|
||
/* 复用 design-tokens 三层令牌（5主题=星球的性格颜色） */
|
||
|
||
.fph-root {
|
||
position: fixed; inset: 0; overflow: hidden;
|
||
background:
|
||
radial-gradient(120% 60% at 50% 108%, var(--primitive-nebula-a), transparent 60%),
|
||
linear-gradient(180deg, var(--primitive-bg-d) 0%, var(--primitive-bg-c) 46%, var(--primitive-bg-b) 72%, var(--primitive-bg-a) 100%);
|
||
color: var(--content-primary);
|
||
font-family: inherit;
|
||
}
|
||
.fph-starfield { position: absolute; inset: 0; width: 100%; height: 100%; opacity: var(--primitive-scene-opacity, 0.8); }
|
||
|
||
/* 湖面：语言组成的湖 */
|
||
.fph-lake {
|
||
position: absolute; left: 0; right: 0; bottom: 0; height: 26%; overflow: hidden;
|
||
background:
|
||
linear-gradient(180deg, transparent, color-mix(in srgb, var(--primitive-cool-glow) 9%, transparent) 24%, color-mix(in srgb, var(--primitive-bg-d) 78%, transparent)),
|
||
repeating-linear-gradient(180deg, color-mix(in srgb, var(--primitive-glass-top) 4%, transparent) 0 1px, transparent 1px 7px);
|
||
border-top: 1px solid color-mix(in srgb, var(--primitive-glass-edge) 55%, transparent);
|
||
}
|
||
.fph-lake-lang {
|
||
position: absolute; left: 0; right: 0; top: 34%;
|
||
white-space: nowrap; text-align: center;
|
||
font-size: 11px; letter-spacing: 1.1em; text-indent: 1.1em;
|
||
color: color-mix(in srgb, var(--primitive-cool-glow) 34%, transparent);
|
||
filter: blur(0.6px); opacity: .5;
|
||
animation: fph-lake-drift 26s linear infinite;
|
||
}
|
||
@keyframes fph-lake-drift { from { transform: translateX(3%); } to { transform: translateX(-3%); } }
|
||
|
||
/* ── 黯淡星球群：无光、仅 rim、等待被开拓 ── */
|
||
.fph-dim {
|
||
position: absolute; border-radius: 50%;
|
||
background: radial-gradient(circle at 36% 32%,
|
||
color-mix(in srgb, var(--primitive-text-faint) 30%, transparent) 0 18%,
|
||
color-mix(in srgb, var(--primitive-bg-b) 92%, transparent) 58%,
|
||
color-mix(in srgb, var(--primitive-bg-c) 96%, transparent) 100%);
|
||
box-shadow:
|
||
inset -3px -4px 8px color-mix(in srgb, var(--primitive-bg-d) 90%, transparent),
|
||
0 0 0 1px color-mix(in srgb, var(--primitive-glass-edge) 52%, transparent),
|
||
0 0 14px color-mix(in srgb, var(--primitive-nebula-a) 40%, transparent);
|
||
opacity: .95;
|
||
}
|
||
.fph-dim.spark::after {
|
||
content: ''; position: absolute; left: 30%; top: 26%; width: 3px; height: 3px; border-radius: 50%;
|
||
background: var(--primitive-warm-glow);
|
||
box-shadow: 0 0 8px var(--primitive-warm-glow);
|
||
animation: fph-spark 4.5s ease-in-out infinite;
|
||
animation-delay: var(--tw-dl, 0s);
|
||
}
|
||
@keyframes fph-spark { 0%,100% { opacity: .3; } 50% { opacity: 1; } }
|
||
|
||
/* ── 悬浮容器：上下浮动，像真的悬在宇宙里 ── */
|
||
.fph-planet-wrap {
|
||
position: absolute; left: 50%; top: 42%;
|
||
width: min(300px, 46vw); aspect-ratio: 1;
|
||
transform: translate(-50%, -50%);
|
||
animation: fph-float 9s ease-in-out infinite;
|
||
transition: top 1.1s cubic-bezier(.2,.8,.2,1), width 1.1s cubic-bezier(.2,.8,.2,1);
|
||
}
|
||
@keyframes fph-float {
|
||
0%, 100% { margin-top: 0; }
|
||
50% { margin-top: -14px; }
|
||
}
|
||
.stage-world .fph-planet-wrap { top: 20%; width: min(130px, 22vw); }
|
||
|
||
/* ── 大爆炸：诞生瞬间 ── */
|
||
.fph-bang-burst {
|
||
position: absolute; inset: -34%; border-radius: 50%;
|
||
background: conic-gradient(from 10deg,
|
||
transparent 0 4%, color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent) 6%, transparent 9%,
|
||
transparent 0 16%, color-mix(in srgb, var(--primitive-cool-glow) 18%, transparent) 18%, transparent 21%,
|
||
transparent 0 30%, color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent) 32%, transparent 35%,
|
||
transparent 0 46%, color-mix(in srgb, var(--primitive-cool-glow) 15%, transparent) 48%, transparent 51%,
|
||
transparent 0 62%, color-mix(in srgb, var(--primitive-warm-glow) 20%, transparent) 64%, transparent 67%,
|
||
transparent 0 78%, color-mix(in srgb, var(--primitive-cool-glow) 16%, transparent) 80%, transparent 83%,
|
||
transparent 0 92%, color-mix(in srgb, var(--primitive-warm-glow) 14%, transparent) 94%, transparent 97%,
|
||
transparent 100%);
|
||
filter: blur(5px);
|
||
opacity: .55;
|
||
animation: fph-bang-pulse 6s ease-in-out infinite;
|
||
}
|
||
.fph-bang-ring {
|
||
position: absolute; inset: -18%; border-radius: 50%;
|
||
border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent);
|
||
box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 16%, transparent);
|
||
opacity: .5;
|
||
animation: fph-ring 6s ease-out infinite;
|
||
}
|
||
@keyframes fph-ring {
|
||
0% { transform: scale(.86); opacity: .55; }
|
||
70% { transform: scale(1.12); opacity: .12; }
|
||
100% { transform: scale(1.12); opacity: 0; }
|
||
}
|
||
@keyframes fph-bang-pulse { 0%,100% { opacity: .4; } 50% { opacity: .65; } }
|
||
.fph-shard {
|
||
position: absolute; height: 1.5px; border-radius: 2px;
|
||
background: linear-gradient(90deg, color-mix(in srgb, var(--primitive-cool-glow) 70%, transparent), transparent);
|
||
opacity: .5;
|
||
animation: fph-spark 5s ease-in-out infinite;
|
||
}
|
||
.fph-shard.warm { background: linear-gradient(90deg, color-mix(in srgb, var(--primitive-warm-glow) 70%, transparent), transparent); }
|
||
.stage-world .fph-bang-burst, .stage-world .fph-bang-ring, .stage-world .fph-shard { opacity: .18; }
|
||
|
||
/* ── 立体球体：高光偏移 + 表面纹理 + 明暗交界 + 大气 rim ── */
|
||
.fph-planet {
|
||
position: absolute; inset: 0; border-radius: 50%;
|
||
/* 球体基底：光源在左上 */
|
||
background: radial-gradient(circle at 33% 30%,
|
||
color-mix(in srgb, var(--primitive-star-bright) 70%, var(--primitive-cool-glow)) 0 4%,
|
||
color-mix(in srgb, var(--primitive-cool-glow) 70%, var(--primitive-bg-b)) 18%,
|
||
color-mix(in srgb, var(--primitive-nebula-a) 88%, var(--primitive-bg-b)) 42%,
|
||
color-mix(in srgb, var(--primitive-bg-b) 96%, transparent) 68%,
|
||
color-mix(in srgb, var(--primitive-bg-c) 98%, transparent) 100%);
|
||
box-shadow:
|
||
inset -30px -26px 56px color-mix(in srgb, var(--primitive-bg-d) 92%, transparent),
|
||
inset -12px -10px 26px color-mix(in srgb, var(--primitive-bg-d) 60%, transparent),
|
||
inset 8px 8px 22px color-mix(in srgb, var(--primitive-star-bright) 10%, transparent),
|
||
0 0 34px color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent),
|
||
0 24px 60px color-mix(in srgb, var(--primitive-shadow) 60%, transparent);
|
||
animation: fph-breathe 8s ease-in-out infinite;
|
||
}
|
||
@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
|
||
|
||
/* 表面：云带+脉络（SVG经脉），26s 环移=可见自转 */
|
||
.fph-planet .surf {
|
||
position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
|
||
background:
|
||
repeating-linear-gradient(96deg,
|
||
transparent 0 18px,
|
||
color-mix(in srgb, var(--primitive-glass-top) 16%, transparent) 18px 26px,
|
||
transparent 26px 44px,
|
||
color-mix(in srgb, var(--primitive-nebula-a) 42%, transparent) 44px 58px,
|
||
transparent 58px 84px),
|
||
repeating-radial-gradient(circle at 42% 58%,
|
||
transparent 0 14px,
|
||
color-mix(in srgb, var(--primitive-cool-glow) 20%, transparent) 14px 20px,
|
||
transparent 20px 34px);
|
||
opacity: .85;
|
||
-webkit-mask: radial-gradient(circle at 40% 36%, #000 44%, color-mix(in srgb, #000 62%, transparent) 70%, transparent 86%);
|
||
mask: radial-gradient(circle at 40% 36%, #000 44%, color-mix(in srgb, #000 62%, transparent) 70%, transparent 86%);
|
||
animation: fph-surf-pan 26s linear infinite;
|
||
}
|
||
@keyframes fph-surf-pan { from { background-position: 0 0, 0 0; } to { background-position: 168px 0, -112px 0; } }
|
||
|
||
/* 脉络：语言世界的经脉，随球自转流动；首尾同形可无缝环移 */
|
||
.fph-planet .surf .veins {
|
||
position: absolute; top: 0; left: 0; height: 100%; width: 200%;
|
||
animation: fph-veins-flow 26s linear infinite;
|
||
}
|
||
@keyframes fph-veins-flow { from { transform: translateX(0); } to { transform: translateX(-50%); } }
|
||
.fph-planet .veins path {
|
||
fill: none;
|
||
stroke: color-mix(in srgb, var(--primitive-cool-glow) 62%, transparent);
|
||
stroke-width: 0.7;
|
||
filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--primitive-cool-glow) 70%, transparent));
|
||
opacity: .75;
|
||
}
|
||
.fph-planet .veins path.warm {
|
||
stroke: color-mix(in srgb, var(--primitive-warm-glow) 66%, transparent);
|
||
filter: drop-shadow(0 0 1.8px color-mix(in srgb, var(--primitive-warm-glow) 75%, transparent));
|
||
opacity: .8;
|
||
}
|
||
.fph-planet .veins path.faint { stroke-width: 0.45; opacity: .4; }
|
||
|
||
/* 球面光点：文明/星群微光，只落在受光面 */
|
||
.fph-planet .speck {
|
||
position: absolute; border-radius: 50%;
|
||
background: color-mix(in srgb, var(--primitive-star-bright) 80%, #fff);
|
||
box-shadow: 0 0 5px color-mix(in srgb, var(--primitive-warm-glow) 55%, transparent);
|
||
animation: fph-twinkle var(--tw-d, 3s) ease-in-out infinite;
|
||
animation-delay: var(--tw-dl, 0s);
|
||
}
|
||
.fph-planet .speck.warm { background: var(--primitive-star-bright); }
|
||
@keyframes fph-twinkle { 0%,100% { opacity: .3; } 50% { opacity: .95; } }
|
||
|
||
/* 明暗交界：从受光点向外的球面暗化 */
|
||
.fph-planet .shade {
|
||
position: absolute; inset: 0; border-radius: 50%;
|
||
background: radial-gradient(circle at 33% 30%,
|
||
transparent 34%,
|
||
color-mix(in srgb, var(--primitive-bg-d) 34%, transparent) 58%,
|
||
color-mix(in srgb, var(--primitive-bg-d) 78%, transparent) 80%,
|
||
color-mix(in srgb, var(--primitive-bg-d) 96%, transparent) 96%);
|
||
}
|
||
|
||
/* 大气 rim：受光缘一线亮 + 外溢大气 */
|
||
.fph-planet .atmo {
|
||
position: absolute; inset: 0; border-radius: 50%;
|
||
box-shadow:
|
||
inset 1.5px 1.5px 3px color-mix(in srgb, var(--primitive-star-bright) 40%, transparent),
|
||
0 0 0 1px color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent),
|
||
0 0 18px color-mix(in srgb, var(--primitive-cool-glow) 26%, transparent);
|
||
}
|
||
|
||
/* 湖中倒影 */
|
||
.fph-planet-reflection {
|
||
position: absolute; left: 50%; top: calc(100% + 26px); width: 70%; height: 42%;
|
||
transform: translateX(-50%) scaleY(-1);
|
||
background: radial-gradient(50% 60% at 50% 0%,
|
||
color-mix(in srgb, var(--primitive-cool-glow) 22%, transparent),
|
||
color-mix(in srgb, var(--primitive-nebula-a) 14%, transparent) 44%, transparent 72%);
|
||
filter: blur(7px); opacity: .5;
|
||
}
|
||
|
||
/* 首屏：编号门 */
|
||
.fph-gate {
|
||
position: absolute; inset: 0; display: grid; align-content: end; justify-items: center;
|
||
padding-bottom: 9vh; gap: 10px; text-align: center;
|
||
}
|
||
.fph-brand { position: absolute; top: 4.5vh; left: 0; right: 0; display: grid; gap: 6px; }
|
||
.fph-brand b { font-size: 20px; letter-spacing: .34em; color: var(--content-primary); }
|
||
.fph-brand span { font-size: 13px; letter-spacing: .3em; color: var(--content-secondary); }
|
||
.fph-brand em { font-style: normal; font-size: 11px; letter-spacing: .42em; color: var(--content-muted); }
|
||
.fph-claim { position: absolute; top: 60%; left: 0; right: 0; margin: 0; display: grid; gap: 3px; }
|
||
.fph-claim i { font-style: normal; font-size: 10.5px; letter-spacing: .3em; color: var(--content-faint); }
|
||
.fph-claim strong { font-size: 12px; letter-spacing: .22em; color: var(--content-muted); }
|
||
.fph-title { margin: 0; font-size: clamp(22px, 3vw, 32px); font-weight: 700; letter-spacing: .12em; color: var(--content-primary); }
|
||
.fph-gatebox {
|
||
display: flex; align-items: center; gap: 8px;
|
||
width: min(560px, calc(100vw - 64px));
|
||
padding: 8px 8px 8px 18px;
|
||
border: 1px solid var(--primitive-glass-edge); border-radius: 14px;
|
||
background: color-mix(in srgb, var(--primitive-glass) 78%, transparent);
|
||
backdrop-filter: blur(14px);
|
||
box-shadow: 0 18px 60px color-mix(in srgb, var(--primitive-shadow) 55%, transparent);
|
||
}
|
||
.fph-gatebox input {
|
||
flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
|
||
color: var(--content-primary); font-size: 15px; letter-spacing: .08em; font-family: inherit;
|
||
}
|
||
.fph-gatebox input::placeholder { color: var(--content-faint); letter-spacing: .04em; }
|
||
.fph-inf {
|
||
width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
|
||
border: 1px solid var(--primitive-glass-edge); background: var(--primitive-glass);
|
||
color: var(--content-muted); font-size: 18px; line-height: 1; transition: all .25s ease;
|
||
}
|
||
.fph-inf.lit {
|
||
color: var(--primitive-star-bright);
|
||
border-color: color-mix(in srgb, var(--primitive-warm-glow) 60%, transparent);
|
||
box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 42%, transparent);
|
||
background: color-mix(in srgb, var(--primitive-warm-glow) 14%, transparent);
|
||
}
|
||
.fph-enter {
|
||
height: 40px; padding: 0 18px; border-radius: 10px; border: 0; cursor: pointer;
|
||
background: var(--button-primary-bg); color: var(--button-primary-text);
|
||
font-weight: 700; letter-spacing: .1em; font-family: inherit;
|
||
box-shadow: var(--button-primary-shadow); transition: opacity .2s ease;
|
||
}
|
||
.fph-enter:disabled { opacity: .38; cursor: not-allowed; box-shadow: none; }
|
||
.fph-gate-msg { margin: 0; min-height: 18px; font-size: 12px; letter-spacing: .1em; color: var(--content-muted); }
|
||
.fph-foot { position: absolute; bottom: 2.6vh; left: 0; right: 0; font-size: 10.5px; letter-spacing: .3em; color: var(--content-faint); }
|
||
|
||
/* 门后：世界展开 */
|
||
.fph-world {
|
||
position: absolute; inset: 0; display: grid; align-content: center; justify-items: center;
|
||
gap: 26px; padding: 12vh 24px 8vh;
|
||
animation: fph-world-in .9s ease both;
|
||
}
|
||
@keyframes fph-world-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
|
||
.fph-world-head { text-align: center; display: grid; gap: 8px; margin-top: 7vh; }
|
||
.fph-world-kicker { font-size: 11px; letter-spacing: .34em; color: var(--accent-light); }
|
||
.fph-world-head h1 { margin: 0; font-size: clamp(24px, 3vw, 36px); letter-spacing: .14em; color: var(--content-primary); }
|
||
.fph-world-head p { margin: 0; font-size: 13px; letter-spacing: .1em; color: var(--content-muted); }
|
||
.fph-world-head b { color: var(--content-secondary); letter-spacing: .12em; }
|
||
.fph-pools { display: grid; grid-template-columns: repeat(3, minmax(180px, 240px)); gap: 16px; justify-content: center; }
|
||
.fph-pool {
|
||
position: relative; display: grid; gap: 6px; justify-items: start; text-align: left;
|
||
padding: 18px 18px 16px; border-radius: 16px; cursor: pointer;
|
||
border: 1px solid var(--primitive-glass-edge);
|
||
background: color-mix(in srgb, var(--primitive-glass) 72%, transparent);
|
||
backdrop-filter: blur(14px);
|
||
color: inherit; font-family: inherit;
|
||
transition: transform .25s ease, border-color .25s ease;
|
||
}
|
||
.fph-pool:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primitive-cool-glow) 46%, var(--primitive-glass-edge)); }
|
||
.fph-pool .pool-light {
|
||
position: absolute; top: 14px; right: 14px; width: 8px; height: 8px; border-radius: 50%;
|
||
background: var(--primitive-cool-glow); box-shadow: 0 0 12px var(--primitive-cool-glow);
|
||
}
|
||
.fph-pool.tone-warm .pool-light { background: var(--primitive-warm-glow); box-shadow: 0 0 12px var(--primitive-warm-glow); }
|
||
.fph-pool b { font-size: 15px; letter-spacing: .08em; color: var(--content-primary); }
|
||
.fph-pool small { font-size: 11.5px; letter-spacing: .06em; color: var(--content-muted); }
|
||
.fph-pool.primary { border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, var(--primitive-glass-edge)); }
|
||
.fph-world-note { margin: 0; font-size: 12px; letter-spacing: .14em; color: var(--content-muted); }
|
||
.fph-back {
|
||
position: absolute; left: 22px; top: 22px; border: 0; background: transparent; cursor: pointer;
|
||
color: var(--content-muted); font-size: 12.5px; letter-spacing: .08em; font-family: inherit;
|
||
}
|
||
@media (max-width: 860px) {
|
||
.fph-pools { grid-template-columns: repeat(2, minmax(150px, 1fr)); width: 100%; }
|
||
}
|