jone/mama-box
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 头图拆两层：散景光点底子 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:
Karlcarlo
2026-09-30 09:14:27 +00:00
parent a0119760ed
commit d2c04194fa
6 changed files with 43 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
mama-box.css
View File

@@ -191,7 +191,8 @@ a.skip:focus{left:16px;top:16px}
hero 橙色区底缘：中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
⚠️ 上面这些是**设计稿**的数，不是现在的实现值。设计稿里没有 slogan，
加进去之后品牌字以下整列都下移了，实际纵向排布以 .home-hero 里那笔账为准。 */
/* 2026-09-30 背景换成孕 25 周图（assets/img/ab3c7e20811a.jpg，1560×750 = 3 倍图 520×250）：
/* 2026-09-30 背景换成孕 25 周图（底子 assets/img/7dfe5be4e828.jpg，1560×750 = 3 倍图 520×250；
羊水囊 + 宝宝单独一层 bc6367fcad38.jpg，见 .hero-baby）：
只抠了原图里的羊水囊 + 宝宝（孕肚太写实，用户要求去掉），缩到原来约 8 成放在右侧，
底子是按原图色调重铺的紫玫瑰渐变 + 囊后一圈暖光晕 + 散景光点。
图高钉死 = 橙区高、右对齐，屏宽 ≤520 都铺得满；再宽就露底色 #5c344e（=图左缘色）。
@@ -201,7 +202,7 @@ a.skip:focus{left:16px;top:16px}
position:relative;color:#fff;overflow:hidden;
background:
linear-gradient(90deg,rgba(40,14,28,.22) 0%,rgba(40,14,28,.08) 38%,rgba(40,14,28,0) 58%),
url(assets/img/ab3c7e20811a.jpg) right center/auto 100% no-repeat,
url(assets/img/7dfe5be4e828.jpg) right center/auto 100% no-repeat,
#5c344e;
padding:env(safe-area-inset-top) 15px 0 16px;
/* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的，
@@ -292,16 +293,37 @@ a.skip:focus{left:16px;top:16px}
改 top 前先读 .home-hero 里那笔竖列账。 */
/* 定位和浮动都挂在外壳上，img 只负责铺满 —— 这样嘴边的泡泡是
相对气泡本身定位的，会跟着整幅画一起上下浮，而不是自己飘在原地 */
/* 2026-09-30 起宝宝是橙区背景图的一部分，这里只剩一个零尺寸锚点，钉在图里宝宝嘴（拳头）边：
背景图右对齐、高 = 橙区高 H，嘴在图上距右边 0.408H、距顶 0.491H（按 1560×750 原图量的），
所以 right 要按 H 算，不能写百分比（百分比是按宽算的）。
背景不浮动了，气泡也就不再跟着整体上下浮。 */
.hero-baby{position:absolute;z-index:2;top:49.1%;right:calc((250px + env(safe-area-inset-top)) * .408);
width:0;height:0;pointer-events:none;user-select:none}
/* 嘴边的小气泡。起点定在图里嘴的位置（约 46%/52%），往左上飘 ——
宝宝头朝右上侧躺，左上正好是「水面」方向。
终点 translate(-16px,-46px) 距圆心约 48px，半径 94.75，绝不会飘出气泡壁。 */
.hb-bub{position:absolute;left:0;top:0;width:7px;height:7px;border-radius:50%;
/* 羊水囊 + 宝宝这一层（2026-09-30）。
底子背景图右对齐、高 = 橙区高 H；这张囊图是从同一张 1560×750 合成图里原样切出来的
(x 940..1560, y 50..710)，所以按 H 换算摆回原位就严丝合缝：
宽 620/750 = .8267H，高 660/750 = .88H，顶 50/750 = .0667H，右 0。
方图四角带着底色，用径向渐变遮罩把边缘羽化掉 —— 这样宝宝动起来，边上不会露出方块。
动效分两层，transform 才不会互相覆盖：
外壳 .hero-baby 慢慢上下浮（6s，像漂在羊水里）
图片 .hero-sac 「胎动」：大部分时间静止，每 7.3s 里突然小幅扭一下、再轻轻蹬一下，
周期和外壳的 6s 错开，叠起来就不像在同一个节拍上重复。 */
.hero-baby{position:absolute;z-index:2;right:0;
top:calc((250px + env(safe-area-inset-top)) * .0667);
width:calc((250px + env(safe-area-inset-top)) * .8267);
height:calc((250px + env(safe-area-inset-top)) * .88);
pointer-events:none;user-select:none;animation:float 6s ease-in-out infinite}
.hero-sac{display:block;width:100%;height:100%;transform-origin:52% 55%;
-webkit-mask-image:radial-gradient(closest-side,#000 91%,transparent 100%);
mask-image:radial-gradient(closest-side,#000 91%,transparent 100%);
animation:kick 7.3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes kick{
0%,52%,100%{transform:none}
56%{transform:rotate(-2.6deg) translate(-2px,1px) scale(1.012)}
61%{transform:rotate(1.4deg) translate(1px,-1px)}
66%{transform:none}
80%{transform:none}
83%{transform:rotate(-1.2deg) translate(-1px,0)}
87%{transform:none}
}
/* 嘴边的小气泡。起点定在囊图里嘴（拳头）的位置（50.6%/48.2%），往左上飘 ——
宝宝头朝右上侧躺，左上正好是「水面」方向。 */
.hb-bub{position:absolute;left:50.6%;top:48.2%;width:7px;height:7px;border-radius:50%;
background:rgba(255,255,255,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8);
opacity:0;animation:bub 4.2s ease-in-out infinite}
@keyframes bub{
@@ -311,10 +333,11 @@ a.skip:focus{left:16px;top:16px}
100%{transform:translate(-16px,-46px) scale(1.15);opacity:0}
}
/* 三颗错开大小、时长和出发点，才不像在同一个节拍上打点 */
.hb-bub.b2{left:-6px;top:4px;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
.hb-bub.b3{left:4px;top:-4px;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
.hb-bub.b2{left:47.8%;top:50%;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
.hb-bub.b3{left:52.4%;top:46.8%;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
/* 系统开了「减少动态效果」就全部停下：这类装饰性循环动画是前庭不适的常见诱因 */
@media (prefers-reduced-motion:reduce){
.hero-baby,.hero-sac{animation:none}
.hb-bub{animation:none;opacity:0}
}