style(首页): 胎动鼓包更尖;「记一下」叹号每 4 秒跳动一下 (v26100413)
- 手/脚/膝/反踢的 sharp 提高约 0.6~0.8,顶点加集中高光与背光(翻身/屁股不加) - .fab-w s 加 fabBang 动画:4 秒一轮,前 0.6 秒跳起晃两下;减少动态效果时关闭 Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
@@ -7,7 +7,7 @@
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<title>兜爸心选 · 孕育陪伴</title>
|
||||
<!-- V:26100412 缓存版本标记:改 css/js 时同步 bump 该值(与 js/app.js 的 VER 同源),静态资源按 mtime 走 ETag 自动刷新 -->
|
||||
<!-- V:26100413 缓存版本标记:改 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 第四节) -->
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
(function () {
|
||||
'use strict';
|
||||
/* 页面版本号(YYMMDD+序号):显示在「关于兜爸心选」页底部;bump 时同步 head 注释与 ?v= */
|
||||
var VER = '26100412';
|
||||
var VER = '26100413';
|
||||
const $ = (s, c) => (c || document).querySelector(s);
|
||||
const $$ = (s, c) => Array.from((c || document).querySelectorAll(s));
|
||||
|
||||
|
||||
18
js/bump.js
18
js/bump.js
@@ -61,18 +61,19 @@
|
||||
|
||||
/* ---------- 宝宝的各个部位:形状不同,动法不同(形状参数和 demo/bump 一致,脚趾去掉了;真实页面上停留时间加长到 3~5 秒,留够看见再伸手的时间) ---------- */
|
||||
const PARTS = {
|
||||
foot: { rx: 60, ry: 68, sharp: 1.7, amp: 9.5, dur: [3.6, 4.6] },
|
||||
fist: { rx: 44, ry: 44, sharp: 1.9, amp: 8, dur: [3, 3.8] },
|
||||
knee: { rx: 48, ry: 80, sharp: 1.6, amp: 8.5, dur: [3.4, 4.2] },
|
||||
foot: { rx: 60, ry: 68, sharp: 2.5, amp: 9.5, dur: [3.6, 4.6] },
|
||||
fist: { rx: 44, ry: 44, sharp: 2.7, amp: 8, dur: [3, 3.8] },
|
||||
knee: { rx: 48, ry: 80, sharp: 2.3, amp: 8.5, dur: [3.4, 4.2] },
|
||||
butt: { rx: 92, ry: 78, sharp: 1.25, amp: 7, dur: [4, 5], roll: true },
|
||||
kick: { rx: 34, ry: 36, sharp: 1.8, amp: 4.5, dur: [.35, .45] }, // 被摁后不服气的反踢:小、快、摁不到
|
||||
kick: { rx: 34, ry: 36, sharp: 2.6, amp: 4.5, dur: [.35, .45] }, // 被摁后不服气的反踢:小、快、摁不到
|
||||
// 20~25 周:宝宝还小,只有很轻的一下(flick),偶尔稍大一点的轻碰(tap)
|
||||
flick: { rx: 32, ry: 34, sharp: 1.7, amp: 6.5, dur: [.8, 1.2], soft: true },
|
||||
tap: { rx: 42, ry: 42, sharp: 1.8, amp: 8, dur: [1.4, 2], soft: true },
|
||||
flick: { rx: 32, ry: 34, sharp: 2.2, amp: 6.5, dur: [.8, 1.2], soft: true },
|
||||
tap: { rx: 42, ry: 42, sharp: 2.3, amp: 8, dur: [1.4, 2], soft: true },
|
||||
// 34 周起:一大片慢慢拱过去(翻身),长条形,边走边起伏
|
||||
roll: { rx: 118, ry: 72, sharp: 1.15, amp: 6.5, dur: [5.5, 7], roll: true, slide: 64 }
|
||||
};
|
||||
// 2026-10-04 用户:「整体幅度要大一点,不然看不清、感受不到」—— 所有部位尺寸统一放大 20%(下面 apply / paint 的力度也一起加了)
|
||||
// 2026-10-04 用户:「踢到的液面鼓得尖一点,更明显」—— 手脚膝的 sharp 加大约 0.6~0.8(越大越往中心收、顶越尖),paint 里顶点再加一点集中高光
|
||||
const SIZE = 1.2;
|
||||
for (const k in PARTS) { PARTS[k].rx *= SIZE; PARTS[k].ry *= SIZE; }
|
||||
const ORDER = ['foot', 'fist', 'butt', 'knee'];
|
||||
@@ -464,7 +465,10 @@
|
||||
// 2026-10-04 用户:「凸起就行,不要变颜色(之前踢完泛浅红)」—— 只留中性灰的背光阴影 + 白高光,不带任何暖色
|
||||
[.16, .22, 1.02, 'rgba(70,62,58,' + (.1 * k).toFixed(3) + ')'],
|
||||
[.34, .42, .66, 'rgba(70,62,58,' + (.08 * k).toFixed(3) + ')'],
|
||||
[-.26, -.32, .55, 'rgba(255,255,255,' + (.38 * k).toFixed(3) + ')']
|
||||
[-.26, -.32, .55, 'rgba(255,255,255,' + (.38 * k).toFixed(3) + ')'],
|
||||
// 尖顶:顶点处一小团亮光 + 紧贴着的背光,鼓包看起来是「被顶出一个尖」而不是一片圆丘(翻身/屁股那种大片的不加)
|
||||
...(P.roll ? [] : [[.07, .09, .3, 'rgba(70,62,58,' + (.09 * k).toFixed(3) + ')'],
|
||||
[-.07, -.09, .2, 'rgba(255,255,255,' + (.5 * k).toFixed(3) + ')']])
|
||||
]);
|
||||
// 小脚丫顶上来时,隐隐约约带出一个脚印:极淡、全是软边,峰值时才看得出,凑近看像有像无
|
||||
if (P === PARTS.foot || P === PARTS.kick) footprint(ft.x + ft.ox + ox, ft.y + ft.oy + oy, P.rx * sp, P.ry * sp, ft.ang + (mode === 'show' ? ft.wob : 0), Math.min(H / P.amp, 1));
|
||||
|
||||
@@ -4292,6 +4292,15 @@ a.skip:focus{left:16px;top:16px}
|
||||
.fab-w i{font-style:normal;font-size:26px}
|
||||
.fab-w em{font-style:normal;font-size:12.5px;line-height:1;margin:9px 0 0 0;letter-spacing:-.5px}
|
||||
.fab-w s{text-decoration:none;font-size:20px;margin-left:0;transform:skewX(-8deg)}
|
||||
/* 2026-10-04 用户:「记一下」后面的叹号隔 3~5 秒动一下 —— 每 4 秒一轮:前 0.6 秒跳起来晃两下,其余时间静止 */
|
||||
.fab-w s{display:inline-block;transform-origin:50% 90%;animation:fabBang 4s ease-in-out 1.5s infinite}
|
||||
@keyframes fabBang{
|
||||
0%,15%,100%{transform:skewX(-8deg)}
|
||||
3%{transform:skewX(-8deg) translateY(-4px) rotate(-14deg) scale(1.15)}
|
||||
7%{transform:skewX(-8deg) translateY(-2px) rotate(12deg) scale(1.08)}
|
||||
11%{transform:skewX(-8deg) rotate(-5deg)}
|
||||
}
|
||||
@media (prefers-reduced-motion:reduce){.fab-w s{animation:none}}
|
||||
.tab-fab .t-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
||||
.tab-fab:active .fab{transform:scale(.9)}
|
||||
.phone.sheet-open .tabbar .fab{transform:scale(1.08)}
|
||||
|
||||
Reference in New Issue
Block a user