feat(首页头图): 孕25周换母婴作图 v5——不规则羊水囊、去胎盘、囊壁细脐带 (v26093015)
- 素材换母婴作图 v5(替代 v4):羊水囊改不规则有机形状,去掉囊顶胎盘, 脐带从囊壁右上方细细淡淡垂向宝宝身前、全程不动;宝宝吸手指时头部 ±15px 低头抬头。 - v5 的囊比 v4 的圆宽,背景缩放 .93→.90、囊心摆到 (1240,375),囊右缘不再被切; 叠加视频以囊心 (661,381) 截 660×660→400×400,54KB;.hero-baby 摆位按新几何重算, 首帧和背景对齐误差 ≈2.4(压缩噪点级)。嘴边气泡起点跟着挪到新嘴位。底色兜底 #de8868。 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
BIN
assets/img/1f7ed5405262.jpg
Normal file
BIN
assets/img/1f7ed5405262.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 43 KiB |
BIN
assets/video/1a9ccfb1439f.mp4
Normal file
BIN
assets/video/1a9ccfb1439f.mp4
Normal file
Binary file not shown.
Binary file not shown.
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26093014 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26093015 缓存版本标记:改 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,11 +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 周循环视频(母婴作图 v4)的第 1 帧,
|
||||
<!-- 2026-09-30:宝宝不再是右上角一张圆形 PNG。头图背景 = 孕 25 周循环视频(母婴作图 v5)的第 1 帧,
|
||||
这里只叠一段截了羊水囊的同源视频 .hero-kid:镜头固定、同一帧起步,所以和背景严丝合缝;
|
||||
宝宝自己吸手指、蹬腿,囊和囊顶胎盘不动(胎盘在遮罩羽化区,由背景那一帧显示)。视频放不起来就停在背景那一帧。 -->
|
||||
宝宝自己吸手指、低头抬头,囊和囊壁上细细的脐带不动。视频放不起来就停在背景那一帧。 -->
|
||||
<div class="hero-baby" aria-hidden="true">
|
||||
<video class="hero-kid" id="heroKid" src="assets/video/88680d066a73.mp4"
|
||||
<video class="hero-kid" id="heroKid" src="assets/video/1a9ccfb1439f.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>
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26093014';
|
||||
var VER = '26093015';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
|
||||
36
mama-box.css
36
mama-box.css
@@ -191,10 +191,11 @@ a.skip:focus{left:16px;top:16px}
|
||||
hero 橙色区底缘:中部 ≈y420(210) 两侧 ≈y340(170) → 椭圆下沿 44px
|
||||
⚠️ 上面这些是**设计稿**的数,不是现在的实现值。设计稿里没有 slogan,
|
||||
加进去之后品牌字以下整列都下移了,实际纵向排布以 .home-hero 里那笔账为准。 */
|
||||
/* 2026-09-30 头图 = 孕 25 周(母婴作图 v4,用户确认版:卡通宝宝带细软胎发、暖桃底;胎盘在囊顶,脐带从上方细细垂下;无孕肚、镜头固定)。
|
||||
背景 assets/img/471b07e27e77.jpg(1560×750 = 3 倍图 520×250)= 视频 yun25w-loop.mp4 第 1 帧缩到 .93,
|
||||
羊水囊中心摆在 (1250,375);视频左/上/下不够的地方按边缘色拉伸补齐并羽化。
|
||||
图高钉死 = 橙区高、右对齐,屏宽 ≤520 都铺得满;再宽就露底色 #de8968(=图左缘色)。
|
||||
/* 2026-09-30 头图 = 孕 25 周(母婴作图 v5,替代 v4:羊水囊改不规则有机形状、去掉囊顶胎盘,脐带从囊壁右上方
|
||||
细细淡淡地垂向宝宝身前;卡通宝宝带细软胎发、暖桃底;无孕肚、镜头固定)。
|
||||
背景 assets/img/1f7ed5405262.jpg(1560×750 = 3 倍图 520×250)= 视频 yun25w-loop.mp4 第 1 帧缩到 .90
|
||||
(v5 的囊比 v4 的圆宽,.93 会切掉囊右缘 17px),羊水囊中心 (661,381) 摆在 (1240,375);视频左/上/下不够的地方按边缘色拉伸补齐并羽化。
|
||||
图高钉死 = 橙区高、右对齐,屏宽 ≤520 都铺得满;再宽就露底色 #de8868(=图左缘色)。
|
||||
会动的宝宝是叠在上面的同源视频,见 .hero-baby。
|
||||
上面叠一层很淡的暖色左深右透渐变,只为让左边白字(孕周环、天数卡)再稳一点。
|
||||
形状(高度、底部椭圆弧)不变。 */
|
||||
@@ -202,8 +203,8 @@ a.skip:focus{left:16px;top:16px}
|
||||
position:relative;color:#fff;overflow:hidden;
|
||||
background:
|
||||
linear-gradient(90deg,rgba(150,55,35,.20) 0%,rgba(150,55,35,.07) 38%,rgba(150,55,35,0) 58%),
|
||||
url(assets/img/471b07e27e77.jpg) right center/auto 100% no-repeat,
|
||||
#de8968;
|
||||
url(assets/img/1f7ed5405262.jpg) right center/auto 100% no-repeat,
|
||||
#de8868;
|
||||
padding:env(safe-area-inset-top) 15px 0 16px;
|
||||
/* 设计稿橙区 210px。但设计稿里气泡下缘是被白卡盖住的,
|
||||
现在气泡补全成整圆(高 189.5),橙区必须够高才不会被 overflow:hidden 切掉。
|
||||
@@ -293,28 +294,29 @@ a.skip:focus{left:16px;top:16px}
|
||||
改 top 前先读 .home-hero 里那笔竖列账。 */
|
||||
/* 定位和浮动都挂在外壳上,img 只负责铺满 —— 这样嘴边的泡泡是
|
||||
相对气泡本身定位的,会跟着整幅画一起上下浮,而不是自己飘在原地 */
|
||||
/* 会动的宝宝(2026-09-30):视频 assets/video/88680d066a73.mp4 = 原片以囊心 (667,368) 截 660×660、缩到 400×400。
|
||||
/* 会动的宝宝(2026-09-30):视频 assets/video/1a9ccfb1439f.mp4 = 原片以囊心 (661,381) 截 660×660、缩到 400×400。
|
||||
原片本身是正放 5s + 倒放 5s,首尾同一帧,直接 loop 无缝。
|
||||
摆位:背景里视频帧缩了 .93,这块 660 → 614 画布像素,左上角落在 (943,68),
|
||||
换算成橙区高 H:宽高 614/750 = .8187H,顶 68/750 = .0907H,右 (1560−1557)/750 ≈ .004H。
|
||||
摆位:背景里视频帧缩了 .90,这块 660 → 594 画布像素,左上角落在 (943,78),
|
||||
换算成橙区高 H:宽高 594/750 = .792H,顶 78/750 = .104H,右 (1560−1537)/750 ≈ .0307H。
|
||||
宝宝的动作(吸手指时低头抬头 ±15px)全在囊心半径 ≈230 以内,遮罩 80% 实心 = 264,够。
|
||||
背景就是同一视频的第 1 帧、镜头固定,所以只需一圈宽羽化遮罩(80%→100%)把方块边化掉,
|
||||
囊外光点冻结在第 1 帧也看不出来。放起来之前 opacity:0,JS 收到 playing 再淡入,
|
||||
放不了就一直是背景那一帧(静态宝宝),不会出现黑框/播放按钮。
|
||||
用户要求:囊不动,只让宝宝自己动 —— 所以这一层没有任何 transform 动画。 */
|
||||
.hero-baby{position:absolute;z-index:2;
|
||||
top:calc((250px + env(safe-area-inset-top)) * .0907);
|
||||
right:calc((250px + env(safe-area-inset-top)) * .004);
|
||||
width:calc((250px + env(safe-area-inset-top)) * .8187);
|
||||
height:calc((250px + env(safe-area-inset-top)) * .8187);
|
||||
top:calc((250px + env(safe-area-inset-top)) * .104);
|
||||
right:calc((250px + env(safe-area-inset-top)) * .0307);
|
||||
width:calc((250px + env(safe-area-inset-top)) * .792);
|
||||
height:calc((250px + env(safe-area-inset-top)) * .792);
|
||||
pointer-events:none;user-select:none}
|
||||
.hero-kid{position:absolute;inset:0;width:100%;height:100%;
|
||||
object-fit:cover;background:transparent;opacity:0;transition:opacity .8s ease;
|
||||
-webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
|
||||
mask-image:radial-gradient(closest-side,#000 80%,transparent 100%)}
|
||||
.hero-kid.is-on{opacity:1}
|
||||
/* 嘴边的小气泡。起点定在视频里嘴(拳头)大致的位置(50.9%/47.6%),往左上飘 ——
|
||||
/* 嘴边的小气泡。起点定在视频里嘴(拳头)大致的位置(49.8%/51.2%,v5),往左上飘 ——
|
||||
宝宝头朝右上侧躺,左上正好是「水面」方向。z-index 压在视频上面。 */
|
||||
.hb-bub{position:absolute;z-index:1;left:50.9%;top:47.6%;width:7px;height:7px;border-radius:50%;
|
||||
.hb-bub{position:absolute;z-index:1;left:49.8%;top:51.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{
|
||||
@@ -324,8 +326,8 @@ a.skip:focus{left:16px;top:16px}
|
||||
100%{transform:translate(-16px,-46px) scale(1.15);opacity:0}
|
||||
}
|
||||
/* 三颗错开大小、时长和出发点,才不像在同一个节拍上打点 */
|
||||
.hb-bub.b2{left:48.3%;top:49%;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
|
||||
.hb-bub.b3{left:52.8%;top:46.2%;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
|
||||
.hb-bub.b2{left:47.2%;top:52.6%;width:5px;height:5px;animation-duration:5.1s;animation-delay:1.4s}
|
||||
.hb-bub.b3{left:51.7%;top:49.8%;width:9px;height:9px;animation-duration:4.7s;animation-delay:2.7s}
|
||||
/* 系统开了「减少动态效果」就全部停下:这类装饰性循环动画是前庭不适的常见诱因 */
|
||||
@media (prefers-reduced-motion:reduce){
|
||||
.hero-kid{display:none}
|
||||
|
||||
Reference in New Issue
Block a user