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

悄悄话夜空八改：满天四角星有大有小一闪一闪、流星头改白色光滴无十字、尾巴软边 (v26100172)

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Karlcarlo
2026-10-02 07:42:18 +00:00
parent 3cff549288
commit 885657fe2b
3 changed files with 38 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title>
<!-- V:26100171 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26100172 缓存版本标记：改 css/js 时同步 bump 该值（与 js/app.js 的 VER 同源），静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手：授权/跳商城/位置上报（分享卡片同步，见 docs/h5-auth-standard.md 第四节） -->

14
js/app.js
View File

@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
var VER = '26100171';
var VER = '26100172';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
@@ -3357,10 +3357,12 @@
const box = $('#wskStars');
if (box.childElementCount) return;
let h = '';
for (let k = 0; k < 130; k++) {
const r = Math.random(), sz = r < .75 ? 1 + Math.random() : r < .95 ? 2 + Math.random() : 3;
h += '<i style="left:' + (Math.random() * 100).toFixed(1) + '%;top:' + (Math.random() * 92).toFixed(1) + '%;width:' + sz.toFixed(1) + 'px;height:' + sz.toFixed(1) +
'px;--o:' + (.25 + Math.random() * .6).toFixed(2) + ';animation-delay:-' + (Math.random() * 6).toFixed(1) + 's;animation-duration:' + (3 + Math.random() * 4).toFixed(1) + 's"></i>';
/* 八改（用户：「星空里都要是星星，不要圆点；有大有小，有的一闪一闪」）：全部用四角星形，
大小 4–15px，约一半会闪 */
for (let k = 0; k < 120; k++) {
const r = Math.random(), sz = r < .68 ? 4 + Math.random() * 3 : r < .94 ? 8 + Math.random() * 3 : 12 + Math.random() * 3;
h += '<i class="' + (Math.random() < .5 ? 'tw' : '') + '" style="left:' + (Math.random() * 100).toFixed(1) + '%;top:' + (Math.random() * 92).toFixed(1) + '%;width:' + sz.toFixed(1) + 'px;height:' + sz.toFixed(1) +
'px;--o:' + (.35 + Math.random() * .6).toFixed(2) + ';animation-delay:-' + (Math.random() * 6).toFixed(1) + 's;animation-duration:' + (1.6 + Math.random() * 3).toFixed(1) + 's"></i>';
}
box.innerHTML = h;
}
@@ -3372,7 +3374,7 @@
const h = hsh(it.id), c = i % cols, r = Math.floor(i / cols);
const x = 36 + ((c + .5 + ((h % 100) / 100 - .5) * .7) / cols) * 58;
const y = 21 + ((r + .5 + (((h >> 8) % 100) / 100 - .5) * .6) / rows) * 38;
const sz = it.mine ? 9 : Math.round(4 + Math.min(it.hugs || 0, 30) / 30 * 6);
const sz = it.mine ? 26 : Math.round(15 + Math.min(it.hugs || 0, 30) / 30 * 11);
return '<button type="button" class="wsk-st' + (it.mine ? ' mine' : '') + (seen.has(it.id) ? ' seen' : '') + (i === fresh && !seen.size ? ' hint' : '') +
'" data-go="' + (i + 1) + '" style="left:' + x.toFixed(1) + '%;top:' + y.toFixed(1) + '%;--s:' + sz + 'px;--tw:' + (2 + (h % 30) / 10).toFixed(1) + 's" aria-label="' + esc(it.text) + '"><i></i></button>';
}).join('');

29
mama-box.css
View File

@@ -3955,3 +3955,32 @@ a.skip:focus{left:16px;top:16px}
.wsc .whp-hug{height:26px;padding:0 10px;font-size:12px}
@media (prefers-reduced-motion:reduce){.wsk-tip.show{animation:none;opacity:1}}
.wmt-l{filter:blur(9px);background:linear-gradient(90deg,rgba(255,255,255,.5),rgba(220,200,255,.22) 30%,rgba(255,180,200,.08) 70%,transparent)}
/* 八改：满天四角星（不再是圆点），亮星同形更大；流星头 = 白色拉长的光滴，不圆、无十字 */
.wh-page .whp-sky i.s1,.wh-page .whp-sky i.s2,.wh-page .whp-sky i.s3{display:none}
.wsk-deco i{border-radius:0;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:none;opacity:var(--o)}
.wsk-deco i.tw{animation:wskTw2 3s ease-in-out infinite}
@keyframes wskTw2{0%,100%{opacity:var(--o);transform:scale(1)}50%{opacity:calc(var(--o) * .2);transform:scale(.55)}}
.wsk-st i{width:var(--s);height:var(--s);border-radius:0;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;box-shadow:none;
filter:drop-shadow(0 0 4px rgba(255,244,228,.9)) drop-shadow(0 0 10px rgba(210,190,255,.5));animation:wskGl2 var(--tw) ease-in-out infinite alternate}
.wsk-st i::before,.wsk-st i::after{display:none}
@keyframes wskGl2{from{transform:scale(.78) rotate(-6deg);opacity:.8}to{transform:scale(1.08) rotate(6deg);opacity:1}}
.wsk-st.mine i{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");box-shadow:none;filter:drop-shadow(0 0 5px rgba(255,210,140,.95)) drop-shadow(0 0 12px rgba(255,170,90,.5))}
.wsk-st.seen i{opacity:.35;animation:none;box-shadow:none;filter:none}
.wsk-st.flare i{animation:wskFlare3 .42s ease-out forwards}
@keyframes wskFlare3{0%{transform:scale(1)}55%{transform:scale(2.4) rotate(20deg);filter:brightness(1.6) drop-shadow(0 0 14px #fff)}100%{transform:scale(1.7) rotate(30deg);filter:drop-shadow(0 0 10px #fff)}}
.wsk-tip i{width:10px;height:10px;border-radius:0;box-shadow:none;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}
.wmt-h{width:38px;height:9px;margin:-4.5px 0 0 -5px;transform-origin:5px 50%;border-radius:50%;
background:radial-gradient(ellipse 60% 50% at 18% 50%,#fff 0,#fff 35%,rgba(255,255,255,.55) 65%,rgba(255,255,255,0) 100%);
box-shadow:0 0 12px 3px rgba(255,255,255,.75),0 0 30px 8px rgba(225,210,255,.45)}
.wmt-h::before,.wmt-h::after{display:none}
.wmt.mine .wmt-h{background:radial-gradient(ellipse 60% 50% at 18% 50%,#FFF6E4 0,#FFF6E4 35%,rgba(255,220,160,.6) 65%,rgba(255,220,160,0) 100%);box-shadow:0 0 12px 3px rgba(255,226,180,.8),0 0 30px 8px rgba(255,180,110,.45)}
@media (prefers-reduced-motion:reduce){.wsk-deco i.tw,.wsk-st i{animation:none}}
.wsk-st.mine i{background-color:transparent}
.wsk-st i,.wsk-deco i{background-color:transparent}
/* 尾巴光楔：外层模糊、内层裁形，边缘才是软的 */
.wmt-l{clip-path:none;background:none;filter:blur(7px)}
.wmt-l::before{content:"";position:absolute;inset:0;clip-path:polygon(0 50%,100% 0,100% 100%);
background:linear-gradient(90deg,rgba(255,255,255,.55),rgba(220,200,255,.25) 30%,rgba(255,180,200,.08) 70%,transparent)}
.wmt.mine .wmt-l{background:none}
.wmt.mine .wmt-l::before{background:linear-gradient(90deg,rgba(255,240,210,.6),rgba(255,200,130,.28) 30%,rgba(255,150,90,.08) 70%,transparent)}