反馈与交互 · 点一下的回应
橡皮筋拉伸Rubber band
- 被拉到极限
- 体积守恒
- 弹回
元素像橡皮筋一样先被横向拉长、同时纵向压扁，然后弹回原样。关键在于「拉长的同时一定要压扁」—— 只拉不压看起来是被裁开的，而不是被拉伸的，因为真实的材料不会凭空变大。
什么时候用它
用在「到极限了」的反馈上 —— 输入框写满了、列表到底了、再加一个就溢出了。别用在主要按钮的点击反馈上：那个位置有更克制的做法（见「按压反馈」）。
参数
transform: scaleX 1→1.25→1 · scaleY 1→0.75→1 · 600ms ease-out
配方
橡皮筋拉伸 → transform: scaleX 1→1.25→1 · scaleY 1→0.75→1 · 600ms ease-out
给 AI 的一句话
做一个橡皮筋拉伸：transform 里 scaleX 从 1 拉到 1.25 再回到 1，同时 scaleY 从 1 压到 0.75 再回到 1，两条时长都是 600ms 用 ease-out。scaleX 变大时 scaleY 必须同时变小 —— 只拉不压会看起来像被裁掉一截。