feat(首页头图): 宝宝单独成层,加「胎动」——时不时扭一下、蹬一下 (v26093004)

- 头图拆两层:散景光点底子 7dfe5be4e828.jpg(背景,不动)+ 羊水囊宝宝 bc6367fcad38.jpg
  (从同一张合成图原样切出,按橙区高 H 换算摆回原位,径向遮罩羽化边缘)。
- 外壳慢浮 6s;图片「胎动」7.3s 一轮:大半时间静止,突然小幅转动 + 位移,随后再轻蹬一下。
  两个周期错开,不像固定节拍。嘴边气泡挂在同一层,跟着宝宝一起动。
- prefers-reduced-motion 下全部停住。

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
2026-09-30 09:14:27 +00:00
parent a0119760ed
commit d2c04194fa
6 changed files with 43 additions and 19 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:26093003 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
<!-- V:26093004 缓存版本标记:改 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 第四节) -->
@@ -59,10 +59,11 @@
<section class="screen is-active" id="screen-home" data-screen="home">
<div class="home-hero">
<div class="petals" id="petals"></div>
<!-- 2026-09-30:宝宝不再是右上角一张圆形 PNG,孕 25 周图(羊水囊 + 宝宝,四周散景光点)
铺成橙区背景,见 style.css 的 .home-hero。这里只剩嘴边冒的气泡,
.hero-baby 是钉在图里嘴位置的一个零尺寸锚点。 -->
<!-- 2026-09-30:宝宝不再是右上角一张圆形 PNG,孕 25 周图。拆成两层:
散景光点底子是 .home-hero 的背景(不动),羊水囊 + 宝宝是这里单独一张图,
才能让宝宝自己「时不时动一下」(胎动),嘴边气泡挂在同一层里跟着动。 -->
<div class="hero-baby" aria-hidden="true">
<img class="hero-sac" src="assets/img/bc6367fcad38.jpg" alt="">
<span class="hb-bub b1"></span><span class="hb-bub b2"></span><span class="hb-bub b3"></span>
</div>
<!-- 右上角原来有个消息圆钮,点开只弹「暂无新消息」——一个永远没有内容的入口,