跳到主要內容

懸浮抬升

滑鼠移入觸發

鼠標移入時元素上浮、陰影加深,卡片與按鈕最常用的懸浮回饋。

把滑鼠移到方塊上
這一條靠 :hover 觸發,頁麵載入時不會自己播。滑鼠移上去、再移開就能來回看。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 懸浮抬升 */
.anim-hover-lift {
  transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s cubic-bezier(.22,.61,.36,1);
}
.anim-hover-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 14px 28px rgba(15,23,42,.18);
}