果冻质感点击反馈需组合scaley/scalex、cubic-bezier(0.68,-0.55,0.27,1.55)、transform-origin:center bottom及will-change:transform，缺一即失效。
直接用 transform: scale() 配合特定贝塞尔曲线 + transform-origin 调整锚点，就能做出果冻质感的点击反馈；但错一个参数，效果就变成“气球缩放”或“文字飞走”。
为什么 :active 里只写 scale(0.95) 没果冻感
因为果冻的本质不是均匀压缩，而是底部受压、顶部滞后、回弹过冲。纯 scale() 缺乏方向性，且默认 transform-origin: 50% 50% 锚点在文字中心，缩放时基线乱跳，中文尤其明显。
- 必须显式设
transform-origin: center bottom，让挤压从底部中心发起，形变更自然 - 单靠
scale()不够，建议组合scaleY(0.92) scaleX(1.03)模拟横向拉伸+纵向压缩 - 缓动必须用
cubic-bezier(0.68, -0.55, 0.27, 1.55)：负起始斜率制造“先压扁”，高终点值实现“回弹过冲” - 别用
ease-in-out或ease，它们没有超调能力，结果就是僵硬一缩
:active 触发果冻动画必须加 animation-fill-mode: forwards
CSS 动画播完默认回到初始状态，果冻反馈如果结束瞬间归零，就会丢失“余震感”，看起来像闪一下就没了。
- 即使只用
transition（非@keyframes），也要确保末帧状态能被保留——所以transition本身不支持forwards，得改用animation+@keyframes - 推荐写法：
animation: jelly-press 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55) forwards - 关键帧至少写三段：
0% { transform: scale(1); }→60% { transform: scaleY(0.88) scaleX(1.05); }→100% { transform: scaleY(1.02) scaleX(0.99); }（微晃收尾） - 别在
:active里写animation-direction: alternate，来回播放会破坏物理直觉
iOS Safari 上果冻动画毛刺、卡顿或不触发
这不是代码写错了，是渲染层没对齐。iOS WebKit 对 subpixel 缩放和模糊叠加特别敏感，不提前声明合成策略就会掉帧。
- 必须加
will-change: transform到按钮元素上（不是伪类里），否则 Safari 不会提前升层 - 移动端
:active生命周期极短，动画还没播完就结束了，所以别依赖它驱动完整果冻帧；改用 JS 添加 class 触发（如监听touchstart）更可靠 - 如果用了
filter: blur(0.4px)增强边缘柔化，务必配overflow: hidden和border-radius: 4px容器兜底，否则模糊溢出成破洞 - 避免在
::before/::after上单独做果冻变形——父容器没设transform-style: preserve-3d时，子层缩放会被裁剪或错位
文字按钮做果冻反馈时，display 和 line-height 很关键
行内元素（比如 <span></span> 或未设 display 的 <a></a>）直接加 transform 在部分浏览器中无效，且缩放后基线偏移会导致下划线断裂、descender 字母（g/y/p）被切。
- 必须设
display: inline-block或display: block，否则transform-origin不生效 -
transform-origin: center bottom对纯文字仍可能偏高，可微调为transform-origin: center calc(100% + 0.1em)，把锚点下移一点，避开 descender 区域 - 慎用
vertical-align：它会影响inline-block元素的 baseline 对齐，导致多个按钮缩放不同步 - 不要用
top/left补偿位置——这会触发 layout，彻底毁掉硬件加速
果冻质感最脆弱的地方不在动画本身，而在锚点、合成层、字体基线这三者的配合。少一个条件，用户看到的就是“抖了一下”，而不是“按下去弹回来”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
