今天要分享一组代码，当鼠标悬停在按钮上时。按钮抖动！！！
<!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>
效果图（静态截图）：
想要看具体的动图，那就动手敲起来吧，效果图很可爱滴呦！！！