悬停在按钮上，按钮抖动 

 1 <style>
 2 .lanren {
 3     margin: 100px auto;
 4     width: 200px;
 5     text-align: center;
 6     height: 40px;
 7     line-height: 40px;
 8     border: 1px solid #CCC;
 9     border-radius: 2px;
10 }
11 .lanren:hover {
12     animation: shake 0.82s cubic-bezier(.36, .07, .19, .97) both;
13 }
14 @keyframes shake {
15     10%, 90% {
16         transform: translate3d(-1px, 0, 0);
17     }
18     20%, 80% {
19         transform: translate3d(2px, 0, 0);
20     }
21     30%, 50%, 70% {
22         transform: translate3d(-4px, 0, 0);
23     }
24     40%, 60% {
25         transform: translate3d(4px, 0, 0);
26     }
27 }
28 </style>
29 
30 <div class="lanren">你敢悬停在我上面吗？</div>​

 

posted @ 2018-08-07 14:16  前端极客  阅读(794)  评论(0)  编辑  收藏  举报