bingshuo/hololake-system-architecture
Watch
1
0
Fork
You've already forked hololake-system-architecture
 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity

feat: 大门v2唯美重绘——一片湖+五块沉底玉(只露尖微动)+湖面正中悬浮编号舱；编号自动补杠(ICE/GLS登记文法)+∞开关点亮；过关玉升起→欢迎语→钥匙门；文字大删改画面叙事（冰朔20260816谕：对外分发的软件要动态画面代替文字）

Browse source
This commit is contained in:
冰朔 2026-08-16 01:25:09 +08:00
commit 2d20170ac7
2 changed files with 111 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

62
product-source/hololake-native-desktop/src/styles.css
View file

@ -437,25 +437,45 @@ svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-lineca
.onboarding-card { position: relative; z-index: 1; transition: opacity .7s ease, transform .7s ease; }
.onboarding-card.fade-out { opacity: 0; transform: translateY(16px) scale(.985); }
/* ===== 光湖世界大门（编号门→域浮起→钥匙门）===== */
.gate-card { width: min(520px, 100%); text-align: center; }
.gate-card form { text-align: left; }
.gate-mark { width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 22px; font-size: 22px; border-color: color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent); color: var(--accent-light); box-shadow: 0 0 42px color-mix(in srgb, var(--primitive-warm-glow) 30%, transparent), inset 0 0 22px color-mix(in srgb, var(--primitive-warm-glow) 14%, transparent); animation: gate-mark-breathe 4.5s ease-in-out infinite; }
@keyframes gate-mark-breathe { 0%, 100% { box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 10%, transparent); } 50% { box-shadow: 0 0 58px color-mix(in srgb, var(--primitive-warm-glow) 40%, transparent), inset 0 0 26px color-mix(in srgb, var(--primitive-warm-glow) 18%, transparent); } }
.gate-card h1 { font-size: 30px; letter-spacing: .04em; }
.gate-card .kicker { letter-spacing: .3em; color: color-mix(in srgb, var(--primitive-warm-glow) 78%, var(--content-muted)); }
.gate-steps { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 22px; }
.gate-steps span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; border: 1px solid var(--panel-edge); border-radius: 999px; color: var(--content-faint); font-size: 12px; letter-spacing: .12em; transition: all .4s ease; }
.gate-steps span i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; border: 1px solid currentColor; font-style: normal; font-size: 10px; }
.gate-steps span.active { color: var(--accent-light); border-color: color-mix(in srgb, var(--primitive-warm-glow) 52%, transparent); background: color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 18%, transparent); }
.gate-steps span.done { color: var(--content-secondary); border-color: color-mix(in srgb, var(--accent-light) 34%, transparent); }
.gate-steps em { width: 34px; height: 1px; background: linear-gradient(90deg, var(--panel-edge), color-mix(in srgb, var(--primitive-warm-glow) 42%, transparent)); }
.gate-number-chip { padding: 1px 8px; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 44%, transparent); border-radius: 7px; color: var(--accent-light); font-weight: 600; letter-spacing: .03em; }
.gate-back { margin-top: 16px; border: 0; background: none; color: var(--content-faint); font-size: 12.5px; letter-spacing: .08em; cursor: pointer; transition: color .25s ease; }
/* ===== 光湖世界大门 v2：一片湖 · 五块沉底玉 · 一只悬浮编号舱 ===== */
.gate-lake { position: fixed; inset: 0; z-index: 20; overflow: hidden; display: grid; place-items: center; background-image: linear-gradient(180deg, color-mix(in srgb, var(--surface-depth) 62%, transparent), color-mix(in srgb, #04070d 78%, transparent) 88%), var(--lake-img); background-size: cover, cover; background-position: center 30%, center; transition: opacity .9s ease; }
.gate-lake.sinking { opacity: 0; }
.lake-mist { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 34% at 50% 68%, color-mix(in srgb, var(--primitive-cool-glow) 13%, transparent), transparent 72%); animation: mist-drift 11s ease-in-out infinite; }
@keyframes mist-drift { 0%, 100% { opacity: .55; transform: translateX(0); } 50% { opacity: .95; transform: translateX(2.4%); } }
/* 沉底五玉：只露一点尖，轻微起伏 */
.lake-jades { position: absolute; left: 0; right: 0; bottom: 20%; display: flex; align-items: flex-end; justify-content: center; gap: clamp(46px, 9vw, 150px); pointer-events: none; }
.jade { position: relative; width: 44px; height: 34px; transform: translateY(64%); clip-path: polygon(50% 0, 90% 72%, 100% 100%, 0 100%, 10% 72%); background: linear-gradient(165deg, color-mix(in srgb, #8fe6c3 62%, transparent), color-mix(in srgb, #3f8f7c 40%, transparent) 58%, color-mix(in srgb, #123c36 30%, transparent)); opacity: .4; filter: blur(.5px); animation: jade-bob 7.5s ease-in-out infinite; transition: transform 1.2s cubic-bezier(.3, .7, .35, 1), opacity 1.2s ease, filter 1.2s ease; }
.jade::after { content: ''; position: absolute; left: 12%; right: 12%; top: 8%; height: 34%; background: linear-gradient(180deg, rgba(255, 255, 255, .34), transparent); clip-path: inherit; }
.jade.j1 { animation-delay: .2s; } .jade.j2 { animation-delay: 1.6s; } .jade.j3 { animation-delay: 3s; } .jade.j4 { animation-delay: 1s; } .jade.j5 { animation-delay: 2.2s; width: 56px; height: 44px; transform: translateY(58%); background: linear-gradient(165deg, color-mix(in srgb, var(--primitive-warm-glow) 74%, transparent), color-mix(in srgb, var(--primitive-warm-glow) 34%, transparent) 56%, color-mix(in srgb, #4a3210 32%, transparent)); opacity: .62; box-shadow: 0 -8px 46px color-mix(in srgb, var(--primitive-warm-glow) 26%, transparent); }
.jade.rising { transform: translateY(-150%) scale(1.5); opacity: 1; filter: blur(0) drop-shadow(0 0 34px color-mix(in srgb, var(--primitive-warm-glow) 58%, transparent)); animation: none; }
@keyframes jade-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
/* 编号舱：湖面正中一只悬浮玻璃舱，只装编号 */
.gate-pod { position: relative; z-index: 3; width: min(400px, 88vw); padding: 38px 32px 32px; text-align: center; border: 1px solid color-mix(in srgb, var(--accent-light) 22%, transparent); border-radius: 24px; background: color-mix(in srgb, var(--panel-bg) 62%, transparent); backdrop-filter: blur(26px) saturate(1.15); box-shadow: 0 34px 90px rgba(0, 0, 0, .5), 0 0 70px color-mix(in srgb, var(--primitive-warm-glow) 9%, transparent), inset 0 1px 0 rgba(255, 255, 255, .07); animation: pod-float 6.5s ease-in-out infinite; transition: opacity .7s ease, transform .7s ease; }
.gate-pod.fade-out { opacity: 0; transform: translateY(18px) scale(.985); }
@keyframes pod-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
.gate-pod-mark { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 26px; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 44%, transparent); border-radius: 18px; color: var(--accent-light); font-family: "Songti SC", serif; font-size: 17px; box-shadow: 0 0 34px color-mix(in srgb, var(--primitive-warm-glow) 24%, transparent), inset 0 0 18px color-mix(in srgb, var(--primitive-warm-glow) 12%, transparent); }
.gate-pod-row { display: flex; gap: 10px; }
.gate-pod input { flex: 1; height: 52px; padding: 0 16px; border: 1px solid color-mix(in srgb, var(--accent-light) 24%, transparent); border-radius: 14px; outline: 0; color: var(--content-primary); background: rgba(0, 0, 0, .22); font-size: 17px; letter-spacing: .08em; text-align: center; transition: border-color .3s ease, box-shadow .3s ease; }
.gate-pod input:focus { border-color: color-mix(in srgb, var(--primitive-warm-glow) 58%, transparent); box-shadow: 0 0 22px color-mix(in srgb, var(--primitive-warm-glow) 18%, transparent); }
.gate-pod input::placeholder { color: var(--content-faint); letter-spacing: .2em; }
.gate-pod form { display: grid; gap: 12px; }
.gate-inf { width: 52px; height: 52px; flex: 0 0 auto; border: 1px solid color-mix(in srgb, var(--accent-light) 24%, transparent); border-radius: 14px; background: rgba(0, 0, 0, .22); color: var(--content-faint); font-size: 21px; cursor: pointer; transition: all .35s ease; }
.gate-inf:hover { color: var(--content-secondary); border-color: color-mix(in srgb, var(--primitive-warm-glow) 40%, transparent); }
.gate-inf.on { color: #0b0f14; background: linear-gradient(150deg, color-mix(in srgb, var(--primitive-warm-glow) 92%, #fff), var(--primitive-warm-glow)); border-color: transparent; box-shadow: 0 0 30px color-mix(in srgb, var(--primitive-warm-glow) 52%, transparent); }
.gate-submit { height: 48px; margin-top: 16px; border: 0; border-radius: 14px; background: linear-gradient(140deg, color-mix(in srgb, var(--primitive-warm-glow) 78%, #fff) 0%, color-mix(in srgb, var(--primitive-warm-glow) 62%, #7a5a22) 100%); color: #141008; font-size: 15px; font-weight: 650; letter-spacing: .3em; text-indent: .3em; cursor: pointer; transition: filter .3s ease, opacity .3s ease, box-shadow .3s ease; box-shadow: 0 10px 30px color-mix(in srgb, var(--primitive-warm-glow) 22%, transparent); }
.gate-submit:hover:not(:disabled) { filter: brightness(1.07); box-shadow: 0 12px 40px color-mix(in srgb, var(--primitive-warm-glow) 34%, transparent); }
.gate-submit:disabled { opacity: .45; cursor: default; box-shadow: none; }
.gate-hint { margin-top: 14px; color: var(--content-muted); font-size: 13px; }
.gate-back { margin-top: 14px; border: 0; background: none; color: var(--content-faint); font-size: 12.5px; letter-spacing: .1em; cursor: pointer; transition: color .25s ease; }
.gate-back:hover { color: var(--accent-light); }
.gate-message { margin-top: 14px; color: var(--content-muted); font-size: 13px; }
.gate-welcome { position: relative; z-index: 2; text-align: center; animation: gate-welcome-in 1s cubic-bezier(.3, .7, .35, 1) both; }
.gate-welcome-kicker { display: inline-block; padding: 6px 16px; border: 1px solid color-mix(in srgb, var(--primitive-warm-glow) 40%, transparent); border-radius: 999px; color: var(--accent-light); font-size: 12px; letter-spacing: .26em; text-indent: .26em; background: color-mix(in srgb, var(--primitive-warm-glow) 8%, transparent); }
.gate-welcome h1 { margin: 20px 0 12px; color: var(--content-primary); font-size: clamp(30px, 4.6vw, 44px); font-weight: 650; letter-spacing: .06em; text-shadow: 0 0 46px color-mix(in srgb, var(--primitive-warm-glow) 34%, transparent); }
.gate-welcome p { color: var(--content-muted); font-size: 14.5px; line-height: 1.7; }
@keyframes gate-welcome-in { 0% { opacity: 0; transform: translateY(26px) scale(.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
/* 过关：玉自湖面升起 → 欢迎语浮现 */
.gate-rise { position: relative; z-index: 3; display: grid; place-items: center; text-align: center; }
.gate-rise-jade { display: block; margin-bottom: 26px; animation: gate-jade-rise 2.3s cubic-bezier(.28, .68, .32, 1) both; }
.gate-rise-jade i { display: block; width: 84px; height: 66px; clip-path: polygon(50% 0, 90% 72%, 100% 100%, 0 100%, 10% 72%); background: linear-gradient(165deg, color-mix(in srgb, var(--primitive-warm-glow) 88%, #fff), color-mix(in srgb, var(--primitive-warm-glow) 46%, transparent) 56%, color-mix(in srgb, #4a3210 40%, transparent)); filter: drop-shadow(0 0 46px color-mix(in srgb, var(--primitive-warm-glow) 62%, transparent)); }
@keyframes gate-jade-rise { 0% { transform: translateY(46vh) scale(.55); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: 1; } }
.gate-rise h1 { margin: 0; color: var(--content-primary); font-size: clamp(30px, 4.4vw, 42px); font-weight: 650; letter-spacing: .1em; text-shadow: 0 0 46px color-mix(in srgb, var(--primitive-warm-glow) 36%, transparent); animation: gate-text-in 1s ease 1s both; }
.gate-rise p { margin: 14px 0 0; color: var(--content-muted); font-size: 14.5px; letter-spacing: .14em; animation: gate-text-in 1s ease 1.5s both; }
@keyframes gate-text-in { 0% { opacity: 0; transform: translateY(14px); } 100% { opacity: 1; transform: translateY(0); } }