feat(首页头图): 孕25周换母婴作图 v7 GIF——改回侧身闭眼睡、正脸可见 (v26093017)

- 用户否了 v6 的背对造型,素材换 v7:回到 v5 姿势(侧身、闭眼睡、小手在嘴边),画风稍卡通、脐带更清晰。
- 构图和囊位置同 v6,接入方式和摆位数全部沿用(静帧 .88 铺底 + GIF 截 450×450 整高块叠加)。
  v7 宝宝动作实测离截块中心最远 ≈168px < 遮罩实心半径 180px;首帧和背景对齐误差 ≈3.5(GIF 抖动噪点级)。
- 底色兜底 #dc8569(=新图左缘色)。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-09-30 16:16:10 +00:00
parent 8c25d5fc74
commit c73a1419ec
7 changed files with 15 additions and 13 deletions

BIN
assets/img/5aec5c71b009.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

BIN
assets/img/91cf003e93b3.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 MiB

View File

@@ -7,7 +7,7 @@
<meta name="mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<title>兜爸心选 · 孕育陪伴</title> <title>兜爸心选 · 孕育陪伴</title>
<!-- V:26093016 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 --> <!-- V:26093017 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<link rel="stylesheet" href="mama-box.css"> <link rel="stylesheet" href="mama-box.css">
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) --> <!-- 共享助手:授权/跳商城/位置上报(分享卡片同步,见 docs/h5-auth-standard.md 第四节) -->
@@ -59,11 +59,11 @@
<section class="screen is-active" id="screen-home" data-screen="home"> <section class="screen is-active" id="screen-home" data-screen="home">
<div class="home-hero"> <div class="home-hero">
<div class="petals" id="petals"></div> <div class="petals" id="petals"></div>
<!-- 2026-09-30:头图背景 = 孕 25 周动图(母婴作图 v6)的静帧,这里只叠一张截了羊水囊的同源 GIF .hero-kid: <!-- 2026-09-30:头图背景 = 孕 25 周动图(母婴作图 v7)的静帧,这里只叠一张截了羊水囊的同源 GIF .hero-kid:
镜头固定、同一帧起步,所以和背景严丝合缝;宝宝背对镜头自己动,囊和脐带不动。 镜头固定、同一帧起步,所以和背景严丝合缝;宝宝侧身闭眼睡、小手在嘴边自己动,囊和脐带不动。
GIF 没加载出来就停在背景那一帧。v6 宝宝不露脸,原来嘴边的小气泡去掉了。 --> GIF 没加载出来就停在背景那一帧。(v6 起嘴边的小气泡去掉了,v7 没加回来。) -->
<div class="hero-baby" aria-hidden="true"> <div class="hero-baby" aria-hidden="true">
<img class="hero-kid" id="heroKid" src="assets/img/5c5c6379bd5f.gif" alt="" decoding="async"> <img class="hero-kid" id="heroKid" src="assets/img/91cf003e93b3.gif" alt="" decoding="async">
</div> </div>
<!-- 右上角原来有个消息圆钮,点开只弹「暂无新消息」——一个永远没有内容的入口, <!-- 右上角原来有个消息圆钮,点开只弹「暂无新消息」——一个永远没有内容的入口,
还顶着一颗红点天天提示。整个删掉;这一排现在只剩左边的品牌字。 还顶着一颗红点天天提示。整个删掉;这一排现在只剩左边的品牌字。

View File

@@ -3,7 +3,7 @@
(function () { (function () {
'use strict'; 'use strict';
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */ /* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
var VER = '26093016'; var VER = '26093017';
const $ = (s, c) => (c || document).querySelector(s); const $ = (s, c) => (c || document).querySelector(s);
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s)); const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));

View File

@@ -191,11 +191,12 @@ a.skip:focus{left:16px;top:16px}
hero 橙色区底缘:中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px hero 橙色区底缘:中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
⚠️ 上面这些是**设计稿**的数,不是现在的实现值。设计稿里没有 slogan, ⚠️ 上面这些是**设计稿**的数,不是现在的实现值。设计稿里没有 slogan,
加进去之后品牌字以下整列都下移了,实际纵向排布以 .home-hero 里那笔账为准。 */ 加进去之后品牌字以下整列都下移了,实际纵向排布以 .home-hero 里那笔账为准。 */
/* 2026-09-30 头图 = 孕 25 周(母婴作图 v6,替代 v5:卡通动漫风宝宝背对镜头、不露脸;脐带更明显, /* 2026-09-30 头图 = 孕 25 周(母婴作图 v7,替代 v6:用户否了 v6 的背对造型,改回 v5 姿势——侧身、闭眼睡、
从囊壁右上方垂下、全程不动;不规则羊水囊、暖桃底;镜头固定)。v6 画幅是 16:9(静帧 1280×720)。 小手在嘴边、正脸可见;画风稍卡通,脐带从囊壁右上方垂下、更清晰、全程不动;不规则羊水囊、暖桃底;镜头固定)。
画幅 16:9(静帧 1280×720),构图、囊位置和 v6 一致,所以摆位数全部沿用。
背景 assets/img/7f9aace360fa.jpg(1560×750 = 3 倍图 520×250)= 静帧 yun25w-still.png 缩到 .88, 背景 assets/img/7f9aace360fa.jpg(1560×750 = 3 倍图 520×250)= 静帧 yun25w-still.png 缩到 .88,
截取块中心 (656,360) 摆在 (1240,375);左/上/下不够的地方按边缘色拉伸补齐并羽化。 截取块中心 (656,360) 摆在 (1240,375);左/上/下不够的地方按边缘色拉伸补齐并羽化。
图高钉死 = 橙区高、右对齐,屏宽 ≤520 都铺得满;再宽就露底色 #df856a(=图左缘色)。 图高钉死 = 橙区高、右对齐,屏宽 ≤520 都铺得满;再宽就露底色 #dc8569(=图左缘色)。
会动的宝宝是叠在上面的同源 GIF,见 .hero-baby。 会动的宝宝是叠在上面的同源 GIF,见 .hero-baby。
上面叠一层很淡的暖色左深右透渐变,只为让左边白字(孕周环、天数卡)再稳一点。 上面叠一层很淡的暖色左深右透渐变,只为让左边白字(孕周环、天数卡)再稳一点。
形状(高度、底部椭圆弧)不变。 */ 形状(高度、底部椭圆弧)不变。 */
@@ -203,8 +204,8 @@ a.skip:focus{left:16px;top:16px}
position:relative;color:#fff;overflow:hidden; position:relative;color:#fff;overflow:hidden;
background: background:
linear-gradient(90deg,rgba(150,55,35,.20) 0%,rgba(150,55,35,.07) 38%,rgba(150,55,35,0) 58%), linear-gradient(90deg,rgba(150,55,35,.20) 0%,rgba(150,55,35,.07) 38%,rgba(150,55,35,0) 58%),
url(assets/img/7f9aace360fa.jpg) right center/auto 100% no-repeat, url(assets/img/5aec5c71b009.jpg) right center/auto 100% no-repeat,
#df856a; #dc8569;
padding:env(safe-area-inset-top) 15px 0 16px; padding:env(safe-area-inset-top) 15px 0 16px;
/* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的, /* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的,
现在气泡补全成整圆(高 189.5),橙区必须够高才不会被 overflow:hidden 切掉。 现在气泡补全成整圆(高 189.5),橙区必须够高才不会被 overflow:hidden 切掉。
@@ -292,8 +293,9 @@ a.skip:focus{left:16px;top:16px}
下移之后圆心 (屏宽−25−94.75, 134.75)、下缘 40+189.5=229.5, 下移之后圆心 (屏宽−25−94.75, 134.75)、下缘 40+189.5=229.5,
必须留在「宝宝来信」卡顶(234)之上 —— 这就是橙区高必须 ≥250 的来源。 必须留在「宝宝来信」卡顶(234)之上 —— 这就是橙区高必须 ≥250 的来源。
改 top 前先读 .home-hero 里那笔竖列账。 */ 改 top 前先读 .home-hero 里那笔竖列账。 */
/* 会动的宝宝(2026-09-30,v6):GIF assets/img/5c5c6379bd5f.gif = 原 GIF(800×450,16fps,3 秒无缝循环) /* 会动的宝宝(2026-09-30,v7):GIF assets/img/91cf003e93b3.gif = 原 GIF(800×450,16fps,3 秒无缝循环)
截 x185 y0 起 450×450(整高,含宝宝全部动作),不缩放,1.7MB。 截 x185 y0 起 450×450(整高),不缩放,1.8MB。v7 宝宝动作实测在原 GIF x310..515 y105..365,
离截块中心最远 ≈168px,遮罩 80% 实心半径 = 180px,包得住。
摆位:背景里静帧缩了 .88(静帧是 GIF 的 1.6 倍),这块 = 静帧 720 → 634 画布像素,左上角落在 (923,58), 摆位:背景里静帧缩了 .88(静帧是 GIF 的 1.6 倍),这块 = 静帧 720 → 634 画布像素,左上角落在 (923,58),
换算成橙区高 H:宽高 634/750 = .8453H,顶 58/750 = .0773H,右 (1560−1557)/750 ≈ .004H。 换算成橙区高 H:宽高 634/750 = .8453H,顶 58/750 = .0773H,右 (1560−1557)/750 ≈ .004H。
背景就是同一画面的静帧、镜头固定,所以只需一圈宽羽化遮罩(80%→100%)把方块边化掉, 背景就是同一画面的静帧、镜头固定,所以只需一圈宽羽化遮罩(80%→100%)把方块边化掉,