按鈕 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;
}