跳到主要内容

按钮弹性

鼠标悬浮触发

悬浮放大、按下缩小,一个类就能给按钮配上完整手感。

把鼠标移到方块上
这一条靠 :hover 触发,页面加载时不会自己播。鼠标移上去、再移开就能来回看。
参数调节
交互类动画由鼠标状态驱动,时长与缓动写在规则里的 transition / animation 上,改成下方代码里的数值即可。
完整代码
/* 按钮弹性 */
.anim-btn-spring {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
}
.anim-btn-spring:hover { transform: scale(1.08); }
.anim-btn-spring:active { transform: scale(.94); }