767
當我們打造網站時，細微的互動設計往往能讓整個網頁更有生命力。今天，我要和大家分享一個簡單卻很有趣的小技巧：當滑鼠懸停在一個元素上，讓它先上下抖動幾下，然後接著左右抖動。
這不僅能吸引訪客的目光，還能為你的網站增添一點活潑的氣息。快來看看怎麼實現吧！
HTML
<div class="box"></div>CSS
.box {
width: 150px;
height: 150px;
background-color: #f39c12;
margin: 50px auto;
transition: transform 0.3s ease;
}
.box:hover {
animation: shakeY 0.5s ease-in-out, shakeX 0.5s ease-in-out 0.5s;
}
/* 定義上下抖動 */
@keyframes shakeY {
0% { transform: translateY(0); }
25% { transform: translateY(-5px); }
50% { transform: translateY(5px); }
75% { transform: translateY(-5px); }
100% { transform: translateY(0); }
}
/* 定義左右抖動 */
@keyframes shakeX {
0% { transform: translateX(0); }
25% { transform: translateX(-5px); }
50% { transform: translateX(5px); }
75% { transform: translateX(-5px); }
100% { transform: translateX(0); }
}關鍵解析
- 上下抖動與左右抖動的分工
- 使用
@keyframes定義兩個動畫：shakeY控制上下抖動（使用translateY）。shakeX控制左右抖動（使用translateX）。
- 使用
- 動畫的順序與延遲
- 在
.box:hover中同時使用兩個動畫：shakeY沒有延遲，立即執行。shakeX延遲 0.5 秒，等上下抖動結束後再開始。
- 在
- 調整參數
- 如果你想讓抖動幅度更大，可以調整
translateY(-5px)和translateX(-5px)的數值。 - 如果想延長或縮短動畫時間，可以修改
0.5s為其他值。
- 如果你想讓抖動幅度更大，可以調整
延伸思考
這樣的動畫效果可以應用在很多地方：
- 按鈕：當使用者滑鼠懸停時，讓按鈕更吸睛。
- 圖片：增強圖片的趣味性，吸引使用者點擊。
- 錯誤提示：讓表單中的錯誤提示更具互動感。
只需稍微修改動畫參數，你就可以創造出屬於你網站的獨特風格！
探索更多來自 雖然沒準備什麼資料 的內容
訂閱即可透過電子郵件收到最新文章。