' +
- '
' + String(i + 1).padStart(2, '0') + '/ ' + String(n).padStart(2, '0') + '' + (it.mine ? '我说的' : '') + '
' +
- '' + chars + '
' + - '' + - (i === 0 && !it.mine ? '双击屏幕,也能给她一个抱抱
' : '') +
- '' + rail + '
diff --git a/index.html b/index.html index 61e0deb..013ed1c 100644 --- a/index.html +++ b/index.html @@ -7,7 +7,7 @@
' + chars + '
' + - '' + (it.mine ? '我说的' : '') + esc(it.text) + '
' + + '不留名字,只留一句话。听到了,就给她一个抱抱。
' + - '你也说一句吧,她们会听到的。
每颗亮星是一句。点一颗,听她说。
'; + paintDeco(); + paintSky(l); paintList(l); + if (cur && list()[cur - 1]) $$('.wsk-st[data-go="' + cur + '"]', page).forEach(x => x.classList.add('cur')); $('#whpLeft').textContent = !data ? '' : !oid() || !data.canPost ? '填好预产期,就能说一句' : data.left ? '今天还能说 ' + data.left + ' 句' : '今天的 3 句说完啦,明天再来'; - if (io) io.disconnect(); - if ('IntersectionObserver' in window) { - io = new IntersectionObserver(es => es.forEach(e => { - e.target.classList.toggle('on', e.isIntersecting); - if (e.isIntersecting) setCur(+e.target.dataset.i); - }), { root: whv, threshold: .6 }); - $$('.whv-s', whv).forEach(s => io.observe(s)); - } else $$('.whv-s', whv).forEach(s => s.classList.add('on')); - setCur(0); - } - function goTo(i, smooth) { - const s = $('.whv-s[data-i="' + i + '"]', whv); - if (s) whv.scrollTo({ top: s.offsetTop, behavior: smooth && !RM ? 'smooth' : 'auto' }); } function drawer(on) { $('#whDrawer').classList.toggle('show', on); @@ -3434,43 +3486,24 @@ $('#whdX').addEventListener('click', () => drawer(false)); $('#whDrawer').addEventListener('click', e => { if (e.target.id === 'whDrawer') drawer(false); }); page.addEventListener('click', e => { - const g = e.target.closest('[data-go]'); + const g = e.target.closest('[data-go],[data-next]'); if (!g) return; haptic(); drawer(false); - goTo(+g.dataset.go, true); - }); - /* 双击屏幕 = 抱抱:大爱心在手指处炸开,再走下面同一条抱抱逻辑 */ - let lastTap = 0; - whv.addEventListener('click', e => { - if (e.target.closest('button')) return; - const now = Date.now(); - if (now - lastTap > 320) { lastTap = now; return; } - lastTap = 0; - const s = e.target.closest('.whv-s'); - const hb = s && $('.whv-hug', s); - if (!hb) return; - if (!RM) { - const big = document.createElement('i'); - big.className = 'whv-big'; - big.innerHTML = HEART; - const r = page.getBoundingClientRect(); - big.style.left = (e.clientX - r.left) + 'px'; - big.style.top = (e.clientY - r.top) + 'px'; - page.appendChild(big); - setTimeout(() => big.remove(), 900); - } - if (!hb.classList.contains('on')) hb.click(); + launch(g.dataset.next ? nextStar() : +g.dataset.go); }); function openPage() { + stopMeteor(); + cur = 0; + card.classList.remove('show'); paintPage(); page.classList.add('show'); page.setAttribute('aria-hidden', 'false'); - whv.scrollTop = 0; drawer(false); haptic(); } function closePage() { + stopMeteor(); drawer(false); page.classList.remove('show'); page.setAttribute('aria-hidden', 'true'); @@ -3591,7 +3624,7 @@ paintEntry(); paintPage(); closeModal(); - setTimeout(() => goTo(vl.findIndex(x => x.id === it.id) + 1, true), 80); + setTimeout(() => launch(1), 350); toast('发出去啦,同孕周妈妈会给你抱抱的'); }) .catch(() => toast('网络不太好,再试一次')) diff --git a/mama-box.css b/mama-box.css index 8f27aed..27e5561 100644 --- a/mama-box.css +++ b/mama-box.css @@ -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} +}