悄悄话流星十一改:划走的星消失、点星光波碎星与星尘、合成音效与开关、全部落完收尾 (v26100175)
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
30
mama-box.css
30
mama-box.css
@@ -4000,3 +4000,33 @@ a.skip:focus{left:16px;top:16px}
|
||||
.wmt-l::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,.75) 25%,rgba(245,238,255,.4) 60%,rgba(255,255,255,.08) 92%,transparent)}
|
||||
.wmt span{text-shadow:0 0 1px rgba(60,30,110,.95),0 0 3px rgba(60,30,110,.7),0 0 12px rgba(255,255,255,.85),0 0 24px rgba(255,255,255,.5)}
|
||||
.wmt.mine span{text-shadow:0 0 1px rgba(110,60,20,.9),0 0 3px rgba(110,60,20,.6),0 0 12px rgba(255,236,200,.85),0 0 24px rgba(255,210,150,.5)}
|
||||
|
||||
/* 十一改:划走的星消失;点星光波 + 碎星;飞行星尘;声音开关;全部落完 */
|
||||
.wsk-st.used{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .6s,visibility .6s}
|
||||
.wsk-st.flare,.wsk-st.flare.used{visibility:visible;opacity:1}
|
||||
.wsk-st.flare.gone{opacity:0}
|
||||
.wsk-bright.back .wsk-st{animation:wskBack .9s cubic-bezier(.2,.8,.2,1) both}
|
||||
@keyframes wskBack{from{opacity:0;transform:translateY(-30px) scale(.3)}to{opacity:1;transform:none}}
|
||||
.wfx-ring,.wfx-sp,.wfx-dust{position:absolute;z-index:2;pointer-events:none}
|
||||
.wfx-ring{width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;border:2px solid rgba(255,255,255,.9);
|
||||
box-shadow:0 0 12px rgba(255,255,255,.8),inset 0 0 8px rgba(255,255,255,.6);animation:wfxRing .8s cubic-bezier(.2,.8,.2,1) forwards}
|
||||
.wfx-ring.gold{border-color:rgba(255,220,160,.95);box-shadow:0 0 12px rgba(255,200,120,.8),inset 0 0 8px rgba(255,200,120,.6)}
|
||||
@keyframes wfxRing{0%{transform:scale(.4);opacity:1}100%{transform:scale(6);opacity:0;border-width:.5px}}
|
||||
.wfx-sp{width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;
|
||||
filter:drop-shadow(0 0 3px #fff);animation:wfxSp .85s cubic-bezier(.15,.7,.3,1) both}
|
||||
.wfx-sp.gold,.wfx-dust.gold{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFC27A' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFC27A' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFE2A8'/%3E%3C/svg%3E")}
|
||||
@keyframes wfxSp{0%{transform:translate(0,0) scale(.3) rotate(0);opacity:1}70%{opacity:1}100%{transform:translate(var(--x),var(--y)) scale(1) rotate(90deg);opacity:0}}
|
||||
.wfx-dust{width:var(--z);height:var(--z);margin:calc(var(--z) / -2) 0 0 calc(var(--z) / -2);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3CradialGradient id='g'%3E%3Cstop offset='0' stop-color='%23FFF4E6' stop-opacity='.85'/%3E%3Cstop offset='1' stop-color='%23FFF4E6' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Ccircle cx='10' cy='10' r='10' fill='url(%23g)' opacity='.45'/%3E%3Cpath d='M10 .5C10.9 7.4 12.6 9.1 19.5 10 12.6 10.9 10.9 12.6 10 19.5 9.1 12.6 7.4 10.9.5 10 7.4 9.1 9.1 7.4 10 .5Z' fill='%23FFFFFF'/%3E%3C/svg%3E") center/contain no-repeat;animation:wfxDust 1s ease-out forwards}
|
||||
@keyframes wfxDust{0%{opacity:.95;transform:scale(1)}100%{opacity:0;transform:translateY(var(--y)) scale(.3) rotate(60deg)}}
|
||||
.whv-snd{display:grid;place-items:center;width:32px;height:32px;margin-left:auto;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;backdrop-filter:blur(6px)}
|
||||
.whv-snd .off,.whv-snd.off .on{display:none}
|
||||
.whv-snd.off .off{display:inline}
|
||||
.whv-snd.off{color:rgba(255,255,255,.55)}
|
||||
.whv-snd+.whv-all{margin-left:8px}
|
||||
.wsk-done{position:absolute;left:0;right:0;top:34%;z-index:3;text-align:center;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .6s,transform .6s,visibility .6s}
|
||||
.wsk-done.show{opacity:1;visibility:visible;transform:none}
|
||||
.wsk-done p{margin:0;font-size:19px;font-weight:300;letter-spacing:2px;line-height:1.7;color:#FFF3E2;text-shadow:0 0 12px rgba(255,220,180,.6)}
|
||||
.wsk-done p span{font-size:13px;color:rgba(255,255,255,.6)}
|
||||
.wsk-done button{margin-top:16px;height:34px;padding:0 18px;border-radius:99px;font-size:13px;font-weight:600;color:#fff;
|
||||
background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px rgba(255,255,255,.3),0 0 18px rgba(255,230,200,.25)}
|
||||
@media (prefers-reduced-motion:reduce){.wsk-bright.back .wsk-st{animation:none}}
|
||||
|
||||
Reference in New Issue
Block a user