今天要分享一組代碼，當鼠標懸停在按鈕上時。按鈕抖動！！！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>鼠標懸停在按鈕上，按鈕抖動</title> </head> <style> .lanren { margin: 200px auto; width: 300px; text-align: center; height: 40px; line-height: 40px; border: 1px solid #CCC; border-radius: 2px; background-color: skyblue; } .lanren:hover { animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both; } @keyframes shake { 10%, 90% {transform: translate3d(-1px, 0, 0);} 20%, 80% {transform: translate3d(2px, 0, 0);} 30%, 50%, 70% {transform: translate3d(-4px, 0, 0);} 40%, 60% {transform: translate3d(4px, 0, 0);} } </style> <body> <div class="lanren">敢懸停在我上面，我就抖動！！</div> </body> </html>
效果圖（靜態截圖）：
想要看具體的動圖，那就動手敲起來吧，效果圖很可愛滴呦！！！