CSS3动画之按钮抖动
Posted shihaiying
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3动画之按钮抖动相关的知识，希望对你有一定的参考价值。
今天要分享一组代码，当鼠标悬停在按钮上时。按钮抖动！！！
<!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>
效果图（静态截图）：
想要看具体的动图，那就动手敲起来吧，效果图很可爱滴呦！！！
以上是关于CSS3动画之按钮抖动的主要内容，如果未能解决你的问题，请参考以下文章