jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

悄悄话全屏页五改：流星夜空，点星变流星、字做尾巴先慢后唰、底部内容卡 (v26100169)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-02 07:08:57 +00:00
parent e70e4cb91b
commit e45306f0dd
3 changed files with 194 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
mama-box.css
View File

@@ -3864,3 +3864,61 @@ a.skip:focus{left:16px;top:16px}
.whv-s.mine .whv-q{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:#FFDDAE;text-shadow:0 0 22px rgba(255,190,120,.55)}
.whd-x{display:grid;place-items:center}
.whv-ct b{font-size:60px;margin-right:4px}
/* ===== 2026-10-02 悄悄话全屏页 · 五改：流星夜空 ===== */
.wsk{position:absolute;inset:0;z-index:1}
.wsk-deco{position:absolute;inset:0;pointer-events:none}
.wsk-deco i{position:absolute;border-radius:50%;background:#fff;opacity:var(--o);animation:wskTw 4s ease-in-out infinite alternate}
@keyframes wskTw{from{opacity:var(--o)}to{opacity:calc(var(--o) * .25)}}
.wsk-deco::before{content:"";position:absolute;left:-20%;right:-20%;top:18%;height:46%;transform:rotate(-24deg);
background:radial-gradient(ellipse at center,rgba(210,180,255,.13),rgba(255,190,200,.05) 45%,transparent 70%);filter:blur(10px)}
/* 偶尔划过的无字小流星，只是氛围 */
.wsk-shoot{position:absolute;top:12%;right:-10%;width:110px;height:1.5px;border-radius:2px;pointer-events:none;opacity:0;
background:linear-gradient(90deg,#fff,rgba(255,255,255,0));transform:rotate(-28deg);animation:wskShoot 9s linear infinite 2s}
.wsk-shoot.s2{top:34%;right:-20%;width:80px;animation-duration:13s;animation-delay:6.5s}
@keyframes wskShoot{0%{opacity:0;translate:0 0}2%{opacity:.9}8%{opacity:0;translate:-320px 170px}100%{opacity:0;translate:-320px 170px}}
.wsk-bright{position:absolute;inset:0}
.wsk-st{position:absolute;width:40px;height:40px;margin:-20px 0 0 -20px;display:grid;place-items:center;border-radius:50%;transition:opacity .6s}
.wsk-st i{display:block;width:var(--s);height:var(--s);border-radius:50%;background:#FFF8EC;
box-shadow:0 0 6px 2px rgba(255,240,220,.75),0 0 18px 4px rgba(200,180,255,.35);animation:wskGl var(--tw) ease-in-out infinite alternate}
.wsk-st i::before,.wsk-st i::after{content:"";position:absolute;left:50%;top:50%;width:calc(var(--s) * 3.4);height:1px;margin:-.5px 0 0 calc(var(--s) * -1.7);
background:linear-gradient(90deg,transparent,rgba(255,255,255,.8),transparent)}
.wsk-st i::after{transform:rotate(90deg)}
@keyframes wskGl{from{transform:scale(.8);opacity:.75}to{transform:scale(1.1);opacity:1}}
.wsk-st.mine i{background:#FFD596;box-shadow:0 0 8px 3px rgba(255,200,120,.85),0 0 22px 6px rgba(255,170,90,.4)}
.wsk-st.seen i{opacity:.4;animation:none;box-shadow:0 0 4px 1px rgba(255,240,220,.4)}
.wsk-st.seen i::before,.wsk-st.seen i::after{display:none}
.wsk-st.hint::after,.wsk-st.cur::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid rgba(255,226,190,.75);animation:whRing 2s ease-out infinite}
.wsk-st.flare i{animation:wskFlare .38s ease-out forwards;opacity:1}
@keyframes wskFlare{0%{transform:scale(1)}60%{transform:scale(2.6);box-shadow:0 0 20px 10px rgba(255,255,255,.9)}100%{transform:scale(1.6)}}
.wsk-st.gone{opacity:0}
.wsk-title{position:absolute;left:24px;right:24px;top:calc(62px + env(safe-area-inset-top));z-index:2;pointer-events:none}
.wsk-t{font-size:26px;font-weight:900;letter-spacing:1px}
.wsk-t b{font-size:40px;margin:0 3px;font-family:"DIN Alternate","DIN",Helvetica,Arial,sans-serif;background:linear-gradient(120deg,#FFE2B8,#FF9E8A);-webkit-background-clip:text;background-clip:text;color:transparent}
.wsk-title p{margin:6px 0 0;font-size:12.5px;color:rgba(255,255,255,.55);letter-spacing:.5px}
.wh-page .whv-top{background:none}
.wh-page .whv-top .whp-tag{margin-left:2px}
/* 流星：白色头 + 一条渐隐的光尾 + 字一个个拖在尾巴上 */
.wmt{position:absolute;inset:0;z-index:2;pointer-events:none;--bl:0px}
.wmt-h,.wmt-l,.wmt span{position:absolute;left:0;top:0;will-change:transform}
.wmt-h{width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:#fff;transform-origin:center;
box-shadow:0 0 10px 4px #fff,0 0 30px 12px rgba(220,200,255,.75),0 0 60px 22px rgba(255,180,200,.35)}
.wmt-l{height:3px;margin-top:-1.5px;transform-origin:0 50%;border-radius:2px;
background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(225,205,255,.5) 25%,rgba(255,190,200,.15) 70%,transparent);filter:blur(.6px)}
.wmt span{font-size:var(--fs);font-weight:900;line-height:1;color:#fff;opacity:0;white-space:nowrap;filter:blur(var(--bl));
text-shadow:0 0 8px rgba(255,255,255,.7),0 0 18px rgba(210,180,255,.6)}
.wmt.mine .wmt-h{background:#FFF2D8;box-shadow:0 0 10px 4px #FFE2B0,0 0 30px 12px rgba(255,200,120,.75),0 0 60px 22px rgba(255,150,90,.35)}
.wmt.mine span{color:#FFE4BC;text-shadow:0 0 8px rgba(255,210,150,.8),0 0 18px rgba(255,160,90,.5)}
/* 内容卡：流星同时出现，保证整句看得清 */
.wsc{position:absolute;left:16px;right:16px;bottom:calc(132px + env(safe-area-inset-bottom));z-index:3;padding:16px 18px 14px;border-radius:20px;
background:linear-gradient(140deg,rgba(255,255,255,.13),rgba(255,255,255,.05));box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(10,5,30,.35);
backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);opacity:0;visibility:hidden;transform:translateY(16px);transition:opacity .4s,transform .45s cubic-bezier(.2,.8,.2,1),visibility .4s}
.wsc.show{opacity:1;visibility:visible;transform:none}
.wsc-q{margin:0;padding-right:64px;font-size:19px;line-height:1.5;font-weight:800}
.wsc-q em{display:inline-block;margin-right:6px;vertical-align:2px;font-style:normal;font-size:11px;font-weight:800;padding:2px 8px;border-radius:99px;background:#FFD596;color:#5A3510}
.wsc-m{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;font-size:12px;color:rgba(255,255,255,.55)}
.wsc-next{position:absolute;right:12px;top:12px;display:flex;align-items:center;gap:2px;height:28px;padding:0 9px 0 11px;border-radius:99px;
background:rgba(255,255,255,.1);color:rgba(255,255,255,.85);font-size:12px;font-weight:700}
@media (prefers-reduced-motion:reduce){
.wsk-deco i,.wsk-st i,.wsk-shoot{animation:none}
}