动效与动画

弹性悬停放大 Spring Hover Scale

悬停放大时用弹簧曲线过冲回弹,而不是呆板的匀速缩放

悬停我(普通 linear)
悬停我(弹簧曲线)

弹性悬停放大(Spring Hover Scale)的关键不在“放大”,而在放大的曲线:用一条过冲缓动曲线 cubic-bezier(0.34, 1.56, 0.64, 1),让元素先弹过头一点(比如 1.1)再回落到目标值 1.08——就像弹簧挂了个小球。对比默认的 linear/ease 曲线,一上手就能感到“活的”和“死的”差别。

什么时候用:所有可点击的卡片、按钮、缩略图的悬停态。它是性价比最高的“高级感”:一行 CSS,无任何依赖。

对 AI 说清楚的三要素:① 目标缩放(1.051.1,再大就廉价);② 过冲曲线(直接给出贝塞尔值);③ 时长 0.30.5s(移开时可以稍快)。

复制即用的提示词片段

可点击卡片悬停时放大到 scale(1.08),使用弹簧过渡曲线
cubic-bezier(0.34, 1.56, 0.64, 1)、时长 0.45s——先轻微过冲再回位,
营造物理弹性;移开时同曲线缩回。