style(metronome): 脚印重画为葫芦型,告别椭圆感

之前的 SVG path 内外侧太对称,看起来还是椭圆。重新设计:

- viewBox 100x140 → 100x150 (拉长比例 1:1.5,更"瘦长")
- 主体 path 内侧凹陷 + 外侧饱满,形成葫芦轮廓:
  · 内侧足弓 x 收到 22 (凹陷)
  · 外侧饱满 x 推到 78 (凸出)
  · 前足比脚跟略宽,模拟真实脚型
- 5 个脚趾:
  · 拇趾 rotate(-18°) 内侧明显倾斜
  · 小趾 rotate(+22°) 外侧外展
  · cy 沿弧线 22→11→9→13→20,形成自然弧形
  · rx 从 6.5 递减到 3.5,大小过渡更自然
- 容器尺寸从 100x140 → 96x144,匹配 SVG 新比例
- walker 高度 200→220rpx 以容纳抬脚动画上限

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
2026-05-25 12:49:36 +08:00
co-authored by Cursor
parent e104249707
commit 30b344b776
2 changed files with 13 additions and 13 deletions
+6 -6
View File
@@ -412,7 +412,7 @@ $radius-btn: 20rpx;
.walker {
position: relative;
width: 100%;
height: 200rpx;
height: 220rpx;
display: flex;
justify-content: center;
align-items: flex-end;
@@ -420,7 +420,7 @@ $radius-btn: 20rpx;
.walker .ground {
position: absolute;
bottom: 18rpx;
bottom: 22rpx;
left: 10%;
right: 10%;
height: 1rpx;
@@ -438,9 +438,9 @@ $radius-btn: 20rpx;
* ============================================================ */
.foot {
position: absolute;
bottom: 18rpx;
width: 100rpx;
height: 140rpx;
bottom: 22rpx;
width: 96rpx;
height: 144rpx;
.footprint {
display: block;
@@ -454,7 +454,7 @@ $radius-btn: 20rpx;
bottom: -6rpx;
left: 50%;
transform: translateX(-50%);
width: 76rpx;
width: 70rpx;
height: 8rpx;
background: radial-gradient(
ellipse at center,