feat(首页头图): 羊水囊不再动,改成囊里的宝宝自己动(吸手指、蹬腿) (v26093006)

- 去掉整层浮动和整图「胎动」扭动(用户:球不要动,要里面的宝宝动)。
- 母婴作图的 25w.mp4 取前 10s,只截囊内 600×600,正放 + 倒放拼成 20s 无缝循环,
  400×400 / 288KB(assets/video/b6476cfce328.mp4),遮罩只露囊内,叠在静态囊图上。
- 静态囊图换成视频第 1 帧(70812d56ec5f.jpg),视频淡入时画面对得上;放不了就停在静态图。
- 微信 iOS 等 WeixinJSBridgeReady 再 play();页面隐藏时暂停;减少动态效果下不放。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-09-30 09:20:13 +00:00
parent b69a02e570
commit f21af1e25b
6 changed files with 52 additions and 31 deletions

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:26093005 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26093006 缓存版本标记:改 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 第四节) -->
@@ -60,10 +60,14 @@
<div class="home-hero">
<div class="petals" id="petals"></div>
<!-- 2026-09-30:宝宝不再是右上角一张圆形 PNG,孕 25 周图。拆成两层:
散景光点底子是 .home-hero 的背景(不动),羊水囊 + 宝宝是这里单独一张图,
才能让宝宝自己「时不时动一下」(胎动),嘴边气泡挂在同一层里跟着动。 -->
散景光点底子是 .home-hero 的背景(不动),羊水囊 + 宝宝是这里单独一层:
静态图 .hero-sac 垫底(= 视频第 1 帧),上面叠一段只截了囊内的循环短视频 .hero-kid,
宝宝自己吸手指、蹬腿,囊本身不动。视频放不起来(微信拦自动播放等)就停在静态图上。 -->
<div class="hero-baby" aria-hidden="true">
<img class="hero-sac" src="assets/img/bc6367fcad38.jpg" alt="">
<img class="hero-sac" src="assets/img/70812d56ec5f.jpg" alt="">
<video class="hero-kid" id="heroKid" src="assets/video/b6476cfce328.mp4"
muted autoplay loop playsinline webkit-playsinline x5-playsinline
preload="auto" disablepictureinpicture></video>
<span class="hb-bub b1"></span><span class="hb-bub b2"></span><span class="hb-bub b3"></span>
</div>
<!-- 右上角原来有个消息圆钮,点开只弹「暂无新消息」——一个永远没有内容的入口,