![]()
![]()
diff --git a/js/app.js b/js/app.js
index fc875a3..073341c 100644
--- a/js/app.js
+++ b/js/app.js
@@ -3,7 +3,7 @@
(function () {
'use strict';
/* 页面版本号（YYMMDD+序号）：显示在「关于兜爸心选」页底部；bump 时同步 head 注释与 ?v= */
- var VER = '26100421';
+ var VER = '26100422';
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 8614575..967521a 100644
--- a/js/hero-fx.js
+++ b/js/hero-fx.js
@@ -74,19 +74,29 @@
const ctx = cv.getContext('2d');
const RS = 6; // 光束小画布缩小倍数
const rc = document.createElement('canvas'), rx = rc.getContext('2d');
- 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 tick = 0, W = 0, H = 0, dpr = 1, seen = true, raf = 0, last = 0, prev = 0;
let SX = 0, SY = 0, SR = 1; // 孕囊圆心/半径（CSS px）
+ /* ---- 羊水深度层（2026-10-04 五版，用户：「要羊水那种有深度的感觉，不是白色纹路来回跑」） ----
+ #heroWater 在宝宝**下面**、正常混合（#heroFx 是 screen 混合，只能提亮 —— 上一版的暗部根本显不出来，只剩白纹）。
+ ① 折射：背景图按水平细条逐条错位（两组慢正弦），像隔着一层液体看过去，整片在缓缓荡
+ ② 暗流：极低分辨率的大团深红褐色，慢慢涌动（只压暗、不发白），给出「水有厚度」的感觉
+ ③ 景深：四周压深、上方略透亮（光从上面来），中间留给孕囊
+ ④ 远处微粒：小而清楚、慢，在宝宝后面；近处的大而虚的光斑在 #heroFx 上、宝宝前面 → 前后有层次 */
+ const wcv = document.getElementById('heroWater'), wx = wcv && wcv.getContext('2d');
+ const bgImg = new Image(); bgImg.src = IMG + '6a268e7269b7.jpg';
+ const DW = 20, dcv = document.createElement('canvas'), dctx = dcv.getContext('2d');
+ let dh = 0, dimg = null;
function size() {
const r = hero.getBoundingClientRect(), b = box.getBoundingClientRect();
dpr = Math.min(devicePixelRatio || 1, 2);
W = r.width; H = r.height;
cv.width = Math.round(W * dpr); cv.height = Math.round(H * dpr);
rc.width = Math.max(8, Math.round(W / RS)); rc.height = Math.max(8, Math.round(H / RS));
- ch = Math.max(8, Math.round(CW * H / W));
- off.width = CW; off.height = ch; img = oc.createImageData(CW, ch);
SX = b.left - r.left + b.width / 2; SY = b.top - r.top + b.height / 2; SR = Math.max(b.width, 60) / 2;
+ if (wcv) {
+ wcv.width = cv.width; wcv.height = cv.height;
+ dh = Math.max(8, Math.round(DW * H / W)); dcv.width = DW; dcv.height = dh; dimg = dctx.createImageData(DW, dh);
+ }
}
// 宝宝保护：孕囊中心附近 → 0，囊边 → 1
function guard(x, y) {
@@ -94,29 +104,60 @@
return d < .62 ? 0 : d > 1.05 ? 1 : (d - .62) / .43; // 宝宝缩到 70% 后大约占孕囊半径的 6 成
}
// 水波：四层不同方向、不同速度的长波叠加，取正半部分 → 一片片柔和的亮斑缓缓流过
- function water(t) {
- /* 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 * 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; }
+ function deep(t, dt) {
+ if (!wx) return;
+ const c = wx;
+ c.setTransform(dpr, 0, 0, dpr, 0, 0);
+ c.globalCompositeOperation = 'source-over'; c.globalAlpha = 1;
+ // 底色（同 CSS）
+ const base = c.createLinearGradient(0, 0, W, 0);
+ base.addColorStop(0, '#CE8069'); base.addColorStop(.3, '#D8886F'); base.addColorStop(1, '#DB9073');
+ c.fillStyle = base; c.fillRect(0, 0, W, H);
+ // ① 折射：背景图逐条错位（图高 = 头图高 - 12，即 CSS 里钉死的 250 + 安全区）
+ if (bgImg.complete && bgImg.naturalWidth) {
+ const A = 3.2, Hs = hero.classList.contains('no-letter') ? H - 12 : H;
+ const sc = Hs / bgImg.naturalHeight, dw = bgImg.naturalWidth * sc + A * 2, x0 = W - dw + A, step = 2;
+ for (let y = 0; y < Hs; y += step) {
+ const dx = A * Math.sin(y * .034 + t * .7) + A * .6 * Math.sin(y * .012 - t * .43);
+ c.drawImage(bgImg, 0, y / sc, bgImg.naturalWidth, step / sc, x0 + dx, y, dw, step + .5);
}
}
- oc.putImageData(img, 0, 0);
- }
- function drawWater() {
- ctx.globalCompositeOperation = 'source-over';
- ctx.imageSmoothingEnabled = true; ctx.imageSmoothingQuality = 'high';
- ctx.drawImage(off, 0, 0, W, H);
+ const ov = c.createLinearGradient(0, 0, W, 0);
+ ov.addColorStop(0, 'rgba(150,55,35,.20)'); ov.addColorStop(.38, 'rgba(150,55,35,.07)'); ov.addColorStop(.58, 'rgba(150,55,35,0)');
+ c.fillStyle = ov; c.fillRect(0, 0, W, H);
+ // ② 暗流：大团、慢、只压暗；偶尔一点琥珀色（不是白）
+ if ((tick ^= 1)) {
+ const d = dimg.data, T = t * .28;
+ for (let y = 0; y < dh; y++) for (let x = 0; x < DW; x++) {
+ const u = x / DW * 4, v = y / DW * 4;
+ const w = (Math.sin(u * 1.2 + T) + Math.sin(v * 1.5 - T * .7 + u * .6) + Math.sin((u + v) * .8 + T * .5)) / 3;
+ const o = (y * DW + x) * 4;
+ if (w < 0) { d[o] = 120; d[o + 1] = 36; d[o + 2] = 24; d[o + 3] = Math.min(1, -w * 1.5) * 70; }
+ else { d[o] = 255; d[o + 1] = 196; d[o + 2] = 140; d[o + 3] = w * w * 34; }
+ }
+ dctx.putImageData(dimg, 0, 0);
+ }
+ c.imageSmoothingEnabled = true; c.imageSmoothingQuality = 'high';
+ c.drawImage(dcv, 0, 0, W, H);
+ // ③ 景深：四周压深、上方略透亮
+ const vg = c.createRadialGradient(SX, SY, SR * .6, SX, SY, Math.max(W, H) * .95);
+ vg.addColorStop(0, 'rgba(110,30,18,0)'); vg.addColorStop(1, 'rgba(110,30,18,.32)');
+ c.fillStyle = vg; c.fillRect(0, 0, W, H);
+ const tg = c.createLinearGradient(0, 0, 0, H);
+ tg.addColorStop(0, 'rgba(255,214,170,.10)'); tg.addColorStop(.45, 'rgba(255,214,170,0)'); tg.addColorStop(1, 'rgba(105,28,16,.16)');
+ c.fillStyle = tg; c.fillRect(0, 0, W, H);
+ // ④ 远处微粒：小、清楚、慢
+ for (const p of FAR) {
+ p.x += (p.vx + Math.sin(t * .3 + p.ph) * .0012) * dt; p.y += p.vy * dt;
+ 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 al = .22 + .22 * Math.sin(t * p.sp + p.ph);
+ c.fillStyle = 'rgba(255,232,205,' + al.toFixed(3) + ')';
+ c.beginPath(); c.arc(p.x * W, p.y * H, p.r, 0, 6.2832); c.fill();
+ }
}
+ const FAR = Array.from({ length: 34 }, () => ({ x: Math.random(), y: Math.random(), r: .45 + Math.random() * .7,
+ vx: (Math.random() - .5) * .003, vy: -(.002 + Math.random() * .004), ph: Math.random() * 6.3, sp: .5 + Math.random() }));
// 柔光束：光源在头图上方偏右画外；每道是一条很宽的渐变扇形，画在小画布上再放大
const RAYS = [[-.12, .07, .8], [0, .05, .7], [.11, .08, 1], [.23, .06, .7]];
function rays(t) {
@@ -131,8 +172,8 @@
const wv = ww * (1 + .2 * Math.sin(t * .17 + i));
const gr = rx.createLinearGradient(ox, oy, ox + Math.cos(a) * L * .8, oy + Math.sin(a) * L * .8);
gr.addColorStop(0, 'rgba(255,248,228,0)');
- gr.addColorStop(.35, 'rgba(255,246,224,' + (.34 * k).toFixed(3) + ')');
- gr.addColorStop(.65, 'rgba(255,240,215,' + (.15 * k).toFixed(3) + ')');
+ gr.addColorStop(.35, 'rgba(255,226,190,' + (.30 * k).toFixed(3) + ')');
+ gr.addColorStop(.65, 'rgba(255,218,180,' + (.13 * k).toFixed(3) + ')');
gr.addColorStop(1, 'rgba(255,235,205,0)');
rx.fillStyle = gr;
rx.beginPath(); rx.moveTo(ox, oy);
@@ -150,8 +191,9 @@
ctx.drawImage(rc, 0, 0, W, H);
}
// 悬浮微粒：慢慢往上漂、左右游，忽明忽暗；孕囊中心附近不画，免得落在宝宝脸上
- const DOTS = Array.from({ length: 26 }, () => ({ x: Math.random(), y: Math.random(), r: .5 + Math.random() * 1.2,
- vx: (Math.random() - .5) * .006, vy: -(.004 + Math.random() * .008), ph: Math.random() * 6.3, sp: .6 + Math.random() * 1.4 }));
+ // 近处光斑（宝宝前面）：少、大、很虚、暖色，漂得比远处快 → 和 deep() 里的远处微粒拉开前后
+ const DOTS = Array.from({ length: 9 }, () => ({ x: Math.random(), y: Math.random(), r: 2.2 + Math.random() * 3.5,
+ vx: (Math.random() - .5) * .01, vy: -(.006 + Math.random() * .01), ph: Math.random() * 6.3, sp: .4 + Math.random() * .8 }));
function dots(t, dt) {
ctx.globalCompositeOperation = 'lighter';
for (const p of DOTS) {
@@ -160,10 +202,10 @@
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 && !babyMask) continue;
- const al = (.15 + .25 * (.5 + .5 * Math.sin(t * p.sp + p.ph))) * (babyMask ? 1 : gd);
+ const al = (.06 + .08 * (.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)');
+ g.addColorStop(0, 'rgba(255,226,196,' + al.toFixed(3) + ')');
+ g.addColorStop(1, 'rgba(255,226,196,0)');
ctx.fillStyle = g; ctx.beginPath(); ctx.arc(X, Y, R, 0, 6.2832); ctx.fill();
}
}
@@ -176,10 +218,7 @@
const t = now / 1000;
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
ctx.clearRect(0, 0, W, H);
- /* 水波：2026-10-04 先关后开 —— 用户之前看到的「宝宝脸/腿变形」其实是 GIF 自带的扭动（已停用 GIF），
- 这层只是叠加的柔光，不做任何形变；而且宝宝那一圈（guard）完全不叠，宝宝表情一点不受影响。 */
- if ((tick ^= 1)) water(t);
- drawWater();
+ deep(t, dt); // 羊水深度层（宝宝下面）
rays(t);
dots(t, dt);
/* 宝宝保护：按当前阶段的宝宝轮廓把这一帧的水波/光束/微粒整块挖掉 ——
@@ -199,5 +238,6 @@
if (home) new MutationObserver(kick).observe(home, { attributes: true, attributeFilter: ['class'] });
if ('IntersectionObserver' in window) new IntersectionObserver(es => { seen = es[0].isIntersecting; kick(); }).observe(hero);
cv.classList.add('is-on');
+ if (wcv) { if (bgImg.complete && bgImg.naturalWidth) wcv.classList.add('is-on'); else bgImg.onload = () => wcv.classList.add('is-on'); } // 背景图到了再盖上，免得先出一块纯色
kick();
})();
diff --git a/mama-box.css b/mama-box.css
index 3c99ea5..66477d1 100644
--- a/mama-box.css
+++ b/mama-box.css
@@ -4494,3 +4494,7 @@ a.skip:focus{left:16px;top: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}}
+
+/* 2026-10-04 羊水深度层：在宝宝下面（z1），正常混合，能压暗也能提亮；画满后盖住 CSS 背景（CSS 背景留作降级/首帧） */
+.hero-water{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%;pointer-events:none;opacity:0;transition:opacity 1s ease}
+.hero-water.is-on{opacity:1}