跳到主要內容

按鈕彈性

滑鼠移入觸發

懸浮放大、按下縮小,一個類就能給按鈕配上完整手感。

把滑鼠移到方塊上
這一條靠 :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); }