feat(首页头图): 孕25周整图铺成头图背景，左侧顺原图色调延伸 (v26093002)
- 橙色渐变底 + 右上角圆形宝宝图 → 整张孕25周图（孕肚弧线 + 羊水囊宝宝）作 .home-hero 背景， 右对齐、高度=头图高；左侧按原图左缘色调横向补出暗粉紫，屏宽 ≤520 都铺得满。 叠一层左深右透渐变压住孕肚亮边，保证左侧白字可读。头图高度 250 与底部椭圆弧不变。 - 去掉右上角圆形图（上一版预览的 dd05df88ab23.png）和三团橙色光斑； 嘴边气泡改挂在零尺寸锚点上，按背景图里嘴的位置定位，不再整体浮动。 - 新图 assets/img/4cd9891cec31.jpg（1560×750，84KB）。旧正式图 b00c707f7b1f.png 保留。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
32
mama-box.css
32
mama-box.css
@@ -191,8 +191,17 @@ a.skip:focus{left:16px;top:16px}
|
||||
hero 橙色区底缘：中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
|
||||
⚠️ 上面这些是**设计稿**的数，不是现在的实现值。设计稿里没有 slogan，
|
||||
加进去之后品牌字以下整列都下移了，实际纵向排布以 .home-hero 里那笔账为准。 */
|
||||
/* 2026-09-30 背景换成孕 25 周图（assets/img/4cd9891cec31.jpg，1560×750 = 3 倍图 520×250）：
|
||||
宝宝和孕肚弧线靠右（为给左侧文字让位，原图羊水囊右侧裁掉一截），左侧是按原图左缘色调横向补出来的暗粉紫，
|
||||
所以图高钉死 = 橙区高、右对齐，屏宽 ≤520 都铺得满；再宽就露底色 #25141f（=图左缘中段色）。
|
||||
上面叠一层左深右透的渐变，只为压住孕肚弧线那道亮光，让左边白字（孕周环、天数卡）读得清。
|
||||
形状（高度、底部椭圆弧）不变。 */
|
||||
.home-hero{
|
||||
position:relative;color:#fff;overflow:hidden;background:var(--grad);
|
||||
position:relative;color:#fff;overflow:hidden;
|
||||
background:
|
||||
linear-gradient(90deg,rgba(24,9,16,.5) 0%,rgba(24,9,16,.22) 38%,rgba(24,9,16,0) 58%),
|
||||
url(assets/img/4cd9891cec31.jpg) right center/auto 100% no-repeat,
|
||||
#25141f;
|
||||
padding:env(safe-area-inset-top) 15px 0 16px;
|
||||
/* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的，
|
||||
现在气泡补全成整圆（高 189.5），橙区必须够高才不会被 overflow:hidden 切掉。
|
||||
@@ -221,10 +230,6 @@ a.skip:focus{left:16px;top:16px}
|
||||
height:calc(250px + env(safe-area-inset-top));
|
||||
border-radius:0 0 50% 50% / 0 0 44px 44px;
|
||||
}
|
||||
.hero-blobs span{position:absolute;border-radius:50%;filter:blur(30px);opacity:.5}
|
||||
.hero-blobs span:nth-child(1){width:190px;height:190px;background:#FFB59C;top:-50px;left:-40px}
|
||||
.hero-blobs span:nth-child(2){width:150px;height:150px;background:#FF9A7B;bottom:20px;right:-30px}
|
||||
.hero-blobs span:nth-child(3){width:120px;height:120px;background:#FFD9C9;top:120px;left:40%;opacity:.32}
|
||||
.petals{position:absolute;inset:0;pointer-events:none;overflow:hidden}
|
||||
.petals i{position:absolute;width:8px;height:8px;background:rgba(255,255,255,.5);border-radius:60% 0 60% 0;animation:petal linear infinite}
|
||||
@keyframes petal{0%{transform:translateY(-20px) rotate(0);opacity:0}15%{opacity:.8}100%{transform:translateY(340px) rotate(320deg);opacity:0}}
|
||||
@@ -286,14 +291,16 @@ a.skip:focus{left:16px;top:16px}
|
||||
改 top 前先读 .home-hero 里那笔竖列账。 */
|
||||
/* 定位和浮动都挂在外壳上，img 只负责铺满 —— 这样嘴边的泡泡是
|
||||
相对气泡本身定位的，会跟着整幅画一起上下浮，而不是自己飘在原地 */
|
||||
.hero-baby{position:absolute;z-index:2;top:calc(40px + env(safe-area-inset-top));right:25px;width:189.5px;
|
||||
pointer-events:none;user-select:none;animation:float 5.5s ease-in-out infinite}
|
||||
.hero-art{width:100%;height:auto;display:block}
|
||||
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
|
||||
/* 2026-09-30 起宝宝是橙区背景图的一部分，这里只剩一个零尺寸锚点，钉在图里宝宝嘴（拳头）边：
|
||||
背景图右对齐、高 = 橙区高 H，嘴在图上距右边 0.372H、距顶 0.5H（按 1560×750 原图量的），
|
||||
所以 right 要按 H 算，不能写百分比（百分比是按宽算的）。
|
||||
背景不浮动了，气泡也就不再跟着整体上下浮。 */
|
||||
.hero-baby{position:absolute;z-index:2;top:50%;right:calc((250px + env(safe-area-inset-top)) * .372);
|
||||
width:0;height:0;pointer-events:none;user-select:none}
|
||||
/* 嘴边的小气泡。起点定在图里嘴的位置（约 46%/52%），往左上飘 ——
|
||||
宝宝头朝右上侧躺，左上正好是「水面」方向。
|
||||
终点 translate(-16px,-46px) 距圆心约 48px，半径 94.75，绝不会飘出气泡壁。 */
|
||||
.hb-bub{position:absolute;left:46%;top:52%;width:7px;height:7px;border-radius:50%;
|
||||
.hb-bub{position:absolute;left:0;top:0;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{
|
||||
@@ -303,11 +310,10 @@ a.skip:focus{left:16px;top:16px}
|
||||
100%{transform:translate(-16px,-46px) scale(1.15);opacity:0}
|
||||
}
|
||||
/* 三颗错开大小、时长和出发点，才不像在同一个节拍上打点 */
|
||||
.hb-bub.b2{left:42.5%;top:54.5%;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
|
||||
.hb-bub.b3{left:48.5%;top:50.5%;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
|
||||
.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}
|
||||
/* 系统开了「减少动态效果」就全部停下：这类装饰性循环动画是前庭不适的常见诱因 */
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.hero-baby{animation:none}
|
||||
.hb-bub{animation:none;opacity:0}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user