CSS3+按鈕抖動
button{ background-color: #4CAF50; border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; -webkit-transition-duration: 0.4s; /* Safari */ transition-duration: 0.4s; box-shadow: 0 9px #999; } button:hover { background-color: #3e8e41; box-shadow: 0 3px #999; transform: translateY(4px); } button:active { background-color: #3e8e41; box-shadow: 0 0 #666; transform: translateY(4px); }
CSS3的強大功能為前端開發者提供了許多新奇有趣的效果,其中按鈕抖動效果是比較常見的一種。通過將按鈕設置為hover狀態,再進行transform動畫的效果調整可以完成一個簡單而炫酷的按鈕抖動動畫。相信在前端開發中使用此效果一定會給用戶帶來更好的體驗和視覺感受。