跳到主要內容

按鈕 3D 按壓

滑鼠移入觸發

底部厚邊做成立體按鍵,按下時厚邊變薄。

把滑鼠移到方塊上
這一條靠 :hover 觸發,頁麵載入時不會自己播。滑鼠移上去、再移開就能來回看。
參數調節
交互類動畫由滑鼠狀態驅動,時長與緩動寫在規則裡的 transition / animation 上,改成下方代碼裡的數值即可。
完整代碼
/* 按鈕 3D 按壓 */
.anim-btn-3d-press {
  box-shadow: 0 6px 0 #1e40af;
  transition: transform .12s ease, box-shadow .12s ease;
}
.anim-btn-3d-press:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 0 #1e40af;
}
.anim-btn-3d-press:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #1e40af;
}