今天要分享一组代码，当鼠标悬停在按钮上时。按钮抖动！！！
<!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>
效果图（静态截图）：
想要看具体的动图，那就动手敲起来吧，效果图很可爱滴呦！！！
原文地址：https://www.cnblogs.com/shihaiying/p/11470485.html
时间： 2024-10-06 07:03:19