planet v4:可见自转+脉络(语言世界的经脉)
冰朔反馈v3不转/无脉络/单调。修:SVG脉络层7条发光经脉(冷暖交织+辉光, width 200% 26s无缝环移=可见自转);云带提速80s→26s并增强对比;mask放宽。 双动画同频26s。结构验证:veins 7 paths + fph-veins-flow/fph-surf-pan running。
This commit is contained in:
parent
01f4240c38
commit
de864945c1
2 changed files with 46 additions and 16 deletions
|
|
@ -191,7 +191,17 @@ export function FirstPlanetHome() {
|
||||||
))}
|
))}
|
||||||
{/* 立体悬浮星球 */}
|
{/* 立体悬浮星球 */}
|
||||||
<div className="fph-planet">
|
<div className="fph-planet">
|
||||||
<i className="surf" />
|
<i className="surf">
|
||||||
|
<svg className="veins" viewBox="0 0 200 100" preserveAspectRatio="none" aria-hidden="true">
|
||||||
|
<path d="M0,22 C30,16 60,28 95,21 S150,14 200,22" />
|
||||||
|
<path d="M0,38 C35,32 70,44 105,37 S160,30 200,38" className="warm" />
|
||||||
|
<path d="M0,52 C40,46 75,58 110,51 S165,44 200,52" />
|
||||||
|
<path d="M0,66 C30,60 65,72 100,65 S155,58 200,66" className="warm" />
|
||||||
|
<path d="M0,80 C38,74 72,86 108,79 S162,72 200,80" />
|
||||||
|
<path d="M0,10 C45,6 85,16 125,9 S175,5 200,10" className="faint" />
|
||||||
|
<path d="M0,92 C42,86 80,96 118,90 S168,84 200,92" className="faint" />
|
||||||
|
</svg>
|
||||||
|
</i>
|
||||||
{specks.map((sp) => (
|
{specks.map((sp) => (
|
||||||
<i key={sp.id} className={`speck${sp.warm ? ' warm' : ''}`} style={{ left: `${sp.x}%`, top: `${sp.y}%`, width: sp.s, height: sp.s, '--tw-d': `${sp.d}s`, '--tw-dl': `${sp.dl}s` } as React.CSSProperties} />
|
<i key={sp.id} className={`speck${sp.warm ? ' warm' : ''}`} style={{ left: `${sp.x}%`, top: `${sp.y}%`, width: sp.s, height: sp.s, '--tw-d': `${sp.d}s`, '--tw-dl': `${sp.dl}s` } as React.CSSProperties} />
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -124,26 +124,46 @@
|
||||||
}
|
}
|
||||||
@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
|
@keyframes fph-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.015); } }
|
||||||
|
|
||||||
/* 表面纹理:云带+陆块,慢速平移=自转错觉;球形遮罩让边缘收窄 */
|
/* 表面:云带+脉络(SVG经脉),26s 环移=可见自转 */
|
||||||
.fph-planet .surf {
|
.fph-planet .surf {
|
||||||
position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
|
position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
|
||||||
background:
|
background:
|
||||||
repeating-linear-gradient(100deg,
|
repeating-linear-gradient(96deg,
|
||||||
transparent 0 26px,
|
|
||||||
color-mix(in srgb, var(--primitive-glass-top) 9%, transparent) 26px 34px,
|
|
||||||
transparent 34px 60px,
|
|
||||||
color-mix(in srgb, var(--primitive-nebula-a) 26%, transparent) 60px 74px,
|
|
||||||
transparent 74px 108px),
|
|
||||||
repeating-radial-gradient(circle at 40% 60%,
|
|
||||||
transparent 0 18px,
|
transparent 0 18px,
|
||||||
color-mix(in srgb, var(--primitive-cool-glow) 12%, transparent) 18px 24px,
|
color-mix(in srgb, var(--primitive-glass-top) 16%, transparent) 18px 26px,
|
||||||
transparent 24px 44px);
|
transparent 26px 44px,
|
||||||
opacity: .6;
|
color-mix(in srgb, var(--primitive-nebula-a) 42%, transparent) 44px 58px,
|
||||||
-webkit-mask: radial-gradient(circle at 42% 38%, #000 30%, color-mix(in srgb, #000 55%, transparent) 62%, transparent 78%);
|
transparent 58px 84px),
|
||||||
mask: radial-gradient(circle at 42% 38%, #000 30%, color-mix(in srgb, #000 55%, transparent) 62%, transparent 78%);
|
repeating-radial-gradient(circle at 42% 58%,
|
||||||
animation: fph-surf-pan 80s linear infinite;
|
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: 240px 0, -160px 0; } }
|
@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 {
|
.fph-planet .speck {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue