diff --git a/assets/img/0022b97f8cc0.png b/assets/img/0022b97f8cc0.png
new file mode 100644
index 0000000..757692a
Binary files /dev/null and b/assets/img/0022b97f8cc0.png differ
diff --git a/assets/img/0dcddb83b038.png b/assets/img/0dcddb83b038.png
new file mode 100644
index 0000000..05b4b27
Binary files /dev/null and b/assets/img/0dcddb83b038.png differ
diff --git a/assets/img/494179795c67.png b/assets/img/494179795c67.png
new file mode 100644
index 0000000..4d369f0
Binary files /dev/null and b/assets/img/494179795c67.png differ
diff --git a/assets/img/507e24e95ef0.png b/assets/img/507e24e95ef0.png
new file mode 100644
index 0000000..74907d0
Binary files /dev/null and b/assets/img/507e24e95ef0.png differ
diff --git a/assets/img/5b39ca21a42e.png b/assets/img/5b39ca21a42e.png
new file mode 100644
index 0000000..b5e3635
Binary files /dev/null and b/assets/img/5b39ca21a42e.png differ
diff --git a/assets/img/681b0bdb885e.png b/assets/img/681b0bdb885e.png
new file mode 100644
index 0000000..7ad527f
Binary files /dev/null and b/assets/img/681b0bdb885e.png differ
diff --git a/assets/img/91f1472ee58a.png b/assets/img/91f1472ee58a.png
new file mode 100644
index 0000000..8434a19
Binary files /dev/null and b/assets/img/91f1472ee58a.png differ
diff --git a/assets/img/d63b80896e8e.png b/assets/img/d63b80896e8e.png
new file mode 100644
index 0000000..fa3fcf5
Binary files /dev/null and b/assets/img/d63b80896e8e.png differ
diff --git a/assets/img/d75b2a87e805.png b/assets/img/d75b2a87e805.png
new file mode 100644
index 0000000..b55d652
Binary files /dev/null and b/assets/img/d75b2a87e805.png differ
diff --git a/index.html b/index.html
index 5f09650..b4df8a1 100644
--- a/index.html
+++ b/index.html
@@ -7,7 +7,7 @@
兜爸心选 · 孕育陪伴
-
+
diff --git a/js/app.js b/js/app.js
index 99b0692..fc875a3 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
- var VER = '26100420';
+ var VER = '26100421';
const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
diff --git a/js/hero-fx.js b/js/hero-fx.js
index 1a98631..8614575 100644
--- a/js/hero-fx.js
+++ b/js/hero-fx.js
@@ -11,17 +11,17 @@
不在首页 / 页面隐藏 / 头图滚出视口时停画；系统「减少动态效果」下整块不画（CSS 也隐藏）。 */
(function () {
'use strict';
- // [起始孕周, 静图, GIF（null = 只用静图）, 孕囊倍数 k] 2026-10-04：宝宝在囊里缩到原图的 70%，孕囊不变
+ // [起始孕周, 静图, GIF（null = 只用静图）, 孕囊倍数 k, 宝宝轮廓遮罩（水波/光挖掉宝宝用）] 2026-10-04：宝宝在囊里缩到原图的 70%，孕囊不变
const STAGES = [
- [0, 'd953571ad48d.jpg', null, .42], // 1 4–7 周 胚芽 + 卵黄囊
- [8, 'dd756c516072.jpg', null, .52], // 2 8–10 周 小豆芽胚胎
- [11, 'a6f52893ad1e.jpg', null, .62], // 3 11–13 周 刚有人形
- [14, '251ec778dc15.jpg', null, .72], // 4 14–17 周 身子拉长、吮手
- [18, 'dcf2ae48e0ec.jpg', null, .86], // 5 18–23 周 比例接近新生儿、偏瘦
- [24, 'b0e24b10aaee.jpg', null, 1], // 6 24–27 周 原来那个宝宝
- [28, '85da5aaebb4f.jpg', null, 1.01], // 7 28–31 周 大一圈、有胎发
- [32, '0780b4698253.jpg', null, 1.02], // 8 32–35 周 肉嘟嘟、抱腿
- [36, 'ff112c222b1e.jpg', null, 1.03] // 9 36 周起 足月、撑满羊水囊（头朝上：10-04 用户说头朝下看着不舒服）
+ [0, 'd953571ad48d.jpg', null, .42, '91f1472ee58a.png'], // 1 4–7 周 胚芽 + 卵黄囊
+ [8, 'dd756c516072.jpg', null, .52, '5b39ca21a42e.png'], // 2 8–10 周 小豆芽胚胎
+ [11, 'a6f52893ad1e.jpg', null, .62, '0dcddb83b038.png'], // 3 11–13 周 刚有人形
+ [14, '251ec778dc15.jpg', null, .72, 'd63b80896e8e.png'], // 4 14–17 周 身子拉长、吮手
+ [18, 'dcf2ae48e0ec.jpg', null, .86, '0022b97f8cc0.png'], // 5 18–23 周 比例接近新生儿、偏瘦
+ [24, 'b0e24b10aaee.jpg', null, 1, 'd75b2a87e805.png'], // 6 24–27 周 原来那个宝宝
+ [28, '85da5aaebb4f.jpg', null, 1.01, '507e24e95ef0.png'], // 7 28–31 周 大一圈、有胎发
+ [32, '0780b4698253.jpg', null, 1.02, '681b0bdb885e.png'], // 8 32–35 周 肉嘟嘟、抱腿
+ [36, 'ff112c222b1e.jpg', null, 1.03, '494179795c67.png'] // 9 36 周起 足月、撑满羊水囊（头朝上：10-04 用户说头朝下看着不舒服）
];
const DEFAULT = 5;
const IMG = 'assets/img/';
@@ -38,11 +38,12 @@
while (i + 1 < STAGES.length && week >= STAGES[i + 1][0]) i++;
return i;
}
- let cur = -1, seq = 0;
+ let cur = -1, seq = 0, babyMask = null; // babyMask：当前阶段宝宝轮廓（黑 + alpha），见 frame() 末尾
function show(i) {
if (i === cur) return;
cur = i;
- const [, png, gif, k] = STAGES[i], my = ++seq;
+ const [, png, gif, k, mk] = STAGES[i], my = ++seq;
+ const mi = new Image(); mi.onload = () => { if (my === seq) babyMask = mi; }; mi.src = IMG + mk;
box.style.setProperty('--k', k);
// 先把旧图淡掉再换，避免新旧宝宝叠在一起闪一下
kid.classList.remove('is-on'); still.classList.remove('is-on');
@@ -73,7 +74,7 @@
const ctx = cv.getContext('2d');
const RS = 6; // 光束小画布缩小倍数
const rc = document.createElement('canvas'), rx = rc.getContext('2d');
- const CW = 32; // 水波低分辨率宽（越低越柔）
+ const CW = 44; // 水波低分辨率宽（越低越柔）
const off = document.createElement('canvas'), oc = off.getContext('2d');
let tick = 0, W = 0, H = 0, dpr = 1, ch = 0, img = null, seen = true, raf = 0, last = 0, prev = 0;
let SX = 0, SY = 0, SR = 1; // 孕囊圆心/半径（CSS px）
@@ -94,26 +95,27 @@
}
// 水波：四层不同方向、不同速度的长波叠加，取正半部分 → 一片片柔和的亮斑缓缓流过
function water(t) {
- const d = img.data, T = t * .45;
+ /* 2026-10-04 四版（用户：「整个上半部分要有羊水那种动态的感觉，现在还是偏静态」）：
+ 明暗两相 —— 波峰处暖白亮斑、波谷处淡淡的暗影，source-over 叠，看起来是光透过流动的水在晃；
+ 尺度比上一版小一倍多（一屏能看到好几片），流速加快。仍是极低分辨率放大 → 边缘全是软的，不是网。 */
+ const d = img.data, T = t * .9;
for (let y = 0; y < ch; y++) {
for (let x = 0; x < CW; x++) {
- const u = x / CW * 6, v = y / CW * 6;
- let w = Math.sin(u * 1.1 + T) + Math.sin(v * 1.3 - T * .8 + u * .4) + Math.sin((u - v) * .9 + T * .6) + Math.sin(Math.hypot(u - 4.5, v - 1) * 1.6 - T * 1.1);
- w = w / 4; w = w > 0 ? w * w : 0; // 只留亮的那半，平方让过渡更软
- const X = x / CW * W, Y = y / ch * H;
- const g = guard(X, Y); // 宝宝那一圈完全不叠水波
- const o = (y * CW + x) * 4;
- d[o] = 255; d[o + 1] = 238; d[o + 2] = 214; d[o + 3] = w * 200 * g * (1 - y / ch * .35);
+ const u = x / CW * 11, v = y / CW * 11;
+ let w = Math.sin(u * 1.1 + T) + Math.sin(v * 1.3 - T * .8 + u * .5) + Math.sin((u - v) * .9 + T * .7)
+ + Math.sin(Math.hypot(u - 8, v - 2) * 1.4 - T * 1.2) * 1.2;
+ w /= 4.2;
+ const o = (y * CW + x) * 4, fade = 1 - y / ch * .3;
+ if (w > 0) { const k = Math.min(1, w * 1.6); d[o] = 255; d[o + 1] = 240; d[o + 2] = 218; d[o + 3] = k * k * 150 * fade; }
+ else { const k = Math.min(1, -w * 1.6); d[o] = 150; d[o + 1] = 60; d[o + 2] = 40; d[o + 3] = k * k * 55 * fade; }
}
}
oc.putImageData(img, 0, 0);
}
function drawWater() {
- ctx.globalCompositeOperation = 'lighter';
+ ctx.globalCompositeOperation = 'source-over';
ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
- ctx.globalAlpha = .55;
ctx.drawImage(off, 0, 0, W, H);
- ctx.globalAlpha = 1;
}
// 柔光束：光源在头图上方偏右画外；每道是一条很宽的渐变扇形，画在小画布上再放大
const RAYS = [[-.12, .07, .8], [0, .05, .7], [.11, .08, 1], [.23, .06, .7]];
@@ -157,8 +159,8 @@
if (p.y < -.03) { p.y = 1.03; p.x = Math.random(); }
if (p.x < -.03) p.x = 1.03; else if (p.x > 1.03) p.x = -.03;
const X = p.x * W, Y = p.y * H, gd = guard(X, Y);
- if (gd <= 0) continue;
- const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * gd;
+ if (gd <= 0 && !babyMask) continue;
+ const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * (babyMask ? 1 : gd);
const R = p.r * 2.4, g = ctx.createRadialGradient(X, Y, 0, X, Y, R);
g.addColorStop(0, 'rgba(255,250,238,' + al.toFixed(3) + ')');
g.addColorStop(1, 'rgba(255,250,238,0)');
@@ -180,6 +182,14 @@
drawWater();
rays(t);
dots(t, dt);
+ /* 宝宝保护：按当前阶段的宝宝轮廓把这一帧的水波/光束/微粒整块挖掉 ——
+ 水在宝宝四周流，宝宝本身一像素都不叠（用户：「水波纹不能影响宝宝的表情，脸不能变」）。
+ 孕囊在轻轻上下浮（CSS hbFloat），所以每帧现读位置。 */
+ if (babyMask) {
+ const hr = hero.getBoundingClientRect(), b = box.getBoundingClientRect();
+ ctx.globalCompositeOperation = 'destination-out';
+ ctx.drawImage(babyMask, b.left - hr.left, b.top - hr.top, b.width, b.height);
+ }
}
function kick() { if (!raf) raf = requestAnimationFrame(frame); }
size();
diff --git a/mama-box.css b/mama-box.css
index 9b6b0aa..3c99ea5 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -4479,19 +4479,18 @@ a.skip:focus{left:16px;top:16px}
box-shadow:0 2px 6px rgba(255,59,48,.35)}
/* ============ 2026-10-04 头图文字层次（用户：「LOGO 不明显，不一定用彩色；天数、孕周全是大白字有点单调」） ============
- · LOGO：白色抠图 → 深可可棕字 + 白描边 + 轻投影，跟底栏「记一下」贴纸同一套语言，压在橙底上一眼可见、又不花。
- 做法：img 留着撑尺寸（透明），::before 用同一张 PNG 当 mask 填棕色；描边/投影是 h1 上的 drop-shadow 叠出来的。
- · 倒计时胶囊：半透明白框 → 实心白胶囊、棕红字，「92」用主题橙红加大 —— 头图里唯一一块「白底深字」，层次一下拉开。
+ · （同日撤回）LOGO 深棕白描边、倒计时白胶囊 —— 用户：「太扎眼」「加背景框也不好」。LOGO 回白字；倒计时去掉框，见下一段。
· 大孕周：白字加一道棕色实投影（贴纸厚度感）；「周」「像西葫芦」换奶油色；「+6天」放进深色小胶囊。 */
-.home-hero .hero-brand{position:relative;filter:drop-shadow(1.3px 0 0 #fff) drop-shadow(-1.3px 0 0 #fff) drop-shadow(0 1.3px 0 #fff) drop-shadow(0 -1.3px 0 #fff) drop-shadow(0 3px 5px rgba(110,30,10,.3))}
-.home-hero .hero-logo{opacity:0;filter:none}
-.home-hero .hero-brand::before{content:"";position:absolute;inset:0;background:#5A2214;
- -webkit-mask:url(assets/img/db2f99232b39.png) left center/contain no-repeat;mask:url(assets/img/db2f99232b39.png) left center/contain no-repeat}
-.hi-due{height:24px;padding:0 11px 0 9px;background:rgba(255,255,255,.94);border:0;color:#9A3F27;text-shadow:none;box-shadow:0 3px 10px rgba(130,40,20,.18)}
-.hi-due b{color:#E2512E;font-size:15px}
-.hi-heart path{fill:#F0603C}
.hi-week b{color:#fff;text-shadow:0 2px 0 rgba(140,50,28,.35),0 6px 14px rgba(120,30,10,.25)}
.hi-unit em{color:#FFE6BF}
.hi-unit span{display:inline-block;margin-top:4px;padding:1px 6px;border-radius:999px;font-size:11px;opacity:1;background:rgba(110,35,18,.28);color:#FFF1DC;text-shadow:none}
.hi-unit span:empty{display:none}
.hi-size{color:#FFE6BF}
+
+/* 2026-10-04 再调：倒计时去掉背景框，只留一行字（♥ + 文案 + 奶油色加大的天数）；孕囊整体轻轻上下浮，配合满幅羊水光影
+ （只是平移，宝宝形状不变；水波遮罩在 hero-fx.js 里每帧现读位置跟着走）。 */
+.hi-due{background:none;border:0;padding:0;height:22px;gap:6px;font-size:12.5px}
+.hi-due b{color:#FFE6BF;font-size:16px}
+.hero-baby{animation:hbFloat 6s ease-in-out infinite}
+@keyframes hbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
+@media (prefers-reduced-motion:reduce){.hero-baby{animation:none}}