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:
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user