1 .shake{
2 width:120px;
3 height:33px;
4 border-radius:66px;
5 background-color:#00ff00;
6 border:0;
7 color:#fff;
8 font-weight:bold;
9 }
10 /*shake 按钮抖动*/
11 .shake:hover{
12 -webkit-animation-name:shake-slow;
13 -ms-animation-name:shake-slow;
14 animation-name:shake-slow;
15 -webkit-animation-duration:5s;
16 -ms-animation-duration:5s;
17 animation-duration:5s;
18 -webkit-animation-iteration-count:infinite;
19 -ms-animation-iteration-count:infinite;
20 animation-iteration-count:infinite;
21 -webkit-animation-timing-function:ease-in-out;
22 -ms-animation-timing-function:ease-in-out;
23 animation-timing-function:ease-in-out;
24 -webkit-animation-delay:0s;
25 -ms-animation-delay:0s;
26 animation-delay:0s;
27 -webkit-animation-play-state:running;
28 -ms-animation-play-state:running;
29 animation-play-state:running;
30 }
31
32 @-webkit-keyframes shake-slow{
33 0% {34 -webkit-transform:translate(0px, 0px) rotate(0deg);
35 }
36 2%{
37 -webkit-transform:translate(-1px, 8px) rotate(1.5deg);
38 }
39 4%{
40 -webkit-transform:translate(7px, 0px) rotate(-0.5deg);
41 }
42 6%{
43 -webkit-transform:translate(8px, 8px) rotate(-3.5deg);
44 }
45 8%{
46 -webkit-transform:translate(-4px, -3px) rotate(-1.5deg);
47 }
48 10%{
49 -webkit-transform:translate(5px, 0px) rotate(-2.5deg);
50 }
51 12%{
52 -webkit-transform:translate(-10px, -3px) rotate(-3.5deg);
53 }
54 14%{
55 -webkit-transform:translate(5px, 7px) rotate(2.5deg);
56 }
57 16%{
58 -webkit-transform:translate(8px, -8px) rotate(-1.5deg);
59 }
60 18%{
61 -webkit-transform:translate(9px, -6px) rotate(-3.5deg);
62 }
63 20%{
64 -webkit-transform:translate(3px, 1px) rotate(-0.5deg);
65 }
66 22%{
67 -webkit-transform:translate(6px, 8px) rotate(-2.5deg);
68 }
69 24%{
70 -webkit-transform:translate(-8px, -1px) rotate(2.5deg);
71 }
72 26%{
73 -webkit-transform:translate(7px, -10px) rotate(0.5deg);
74 }
75 28%{
76 -webkit-transform:translate(7px, -4px) rotate(-3.5deg);
77 }
78 30%{
79 -webkit-transform:translate(-2px, -6px) rotate(-1.5deg);
80 }
81 32%{
82 -webkit-transform:translate(-1px, 0px) rotate(2.5deg);
83 }
84 34%{
85 -webkit-transform:translate(6px, 2px) rotate(-0.5deg);
86 }
87 36%{
88 -webkit-transform:translate(2px, 7px) rotate(1.5deg);
89 }
90 38%{
91 -webkit-transform:translate(2px, -9px) rotate(1.5deg);
92 }
93 40%{
94 -webkit-transform:translate(-5px, -1px) rotate(-0.5deg);
95 }
96 42%{
97 -webkit-transform:translate(-8px, 2px) rotate(-0.5deg);
98 }
99 44%{
100 -webkit-transform:translate(-4px, 3px) rotate(0.5deg);
101 }
102 46%{
103 -webkit-transform:translate(-10px, -2px) rotate(-0.5deg);
104 }
105 48%{
106 -webkit-transform:translate(1px, 9px) rotate(1.5deg);
107 }
108 50%{
109 -webkit-transform:translate(6px, 7px) rotate(1.5deg);
110 }
111 52%{
112 -webkit-transform:translate(-8px, 4px) rotate(0.5deg);
113 }
114 54%{
115 -webkit-transform:translate(6px, -8px) rotate(-2.5deg);
116 }
117 56%{
118 -webkit-transform:translate(2px, -9px) rotate(-2.5deg);
119 }
120 58%{
121 -webkit-transform:translate(-2px, -9px) rotate(0.5deg);
122 }
123 60%{
124 -webkit-transform:translate(2px, 7px) rotate(-0.5deg);
125 }
126 62%{
127 -webkit-transform:translate(0px, 0px) rotate(-1.5deg);
128 }
129 64%{
130 -webkit-transform:translate(-9px, -4px) rotate(-3.5deg);
131 }
132 66%{
133 -webkit-transform:translate(6px, -6px) rotate(0.5deg);
134 }
135 68%{
136 -webkit-transform:translate(0px, -7px) rotate(-2.5deg);
137 }
138 70%{
139 -webkit-transform:translate(-10px, 1px) rotate(1.5deg);
140 }
141 72%{
142 -webkit-transform:translate(-7px, 9px) rotate(2.5deg);
143 }
144 74%{
145 -webkit-transform:translate(2px, -6px) rotate(-0.5deg);
146 }
147 76%{
148 -webkit-transform:translate(5px, 1px) rotate(-0.5deg);
149 }
150 78%{
151 -webkit-transform:translate(-1px, 5px) rotate(2.5deg);
152 }
153 80%{
154 -webkit-transform:translate(3px, 7px) rotate(2.5deg);
155 }
156 82%{
157 -webkit-transform:translate(-6px, -7px) rotate(-0.5deg);
158 }
159 84%{
160 -webkit-transform:translate(-8px, 8px) rotate(-2.5deg);
161 }
162 86%{
163 -webkit-transform:translate(8px, 3px) rotate(-2.5deg);
164 }
165 88%{
166 -webkit-transform:translate(-8px, 3px) rotate(-1.5deg);
167 }
168 90%{
169 -webkit-transform:translate(-7px, -4px) rotate(-3.5deg);
170 }
171 92%{
172 -webkit-transform:translate(-8px, 4px) rotate(2.5deg);
173 }
174 94%{
175 -webkit-transform:translate(-6px, -6px) rotate(-3.5deg);
176 }
177 96%{
178 -webkit-transform:translate(-3px, 2px) rotate(-3.5deg);
179 }
180 98%{
181 -webkit-transform:translate(2px, 1px) rotate(-0.5deg);
182 }
183 }184 @-ms-keyframes shake-slow{
185 0% {186 -ms-transform:translate(0px, 0px) rotate(0deg);
187 }
188 2%{
189 -ms-transform:translate(-9px, 1px) rotate(-1.5deg);
190 }
191 4%{
192 -ms-transform:translate(-10px, -1px) rotate(-3.5deg);
193 }
194 6%{
195 -ms-transform:translate(6px, 2px) rotate(-1.5deg);
196 }
197 8%{
198 -ms-transform:translate(-3px, -6px) rotate(-1.5deg);
199 }
200 10%{
201 -ms-transform:translate(-10px, -3px) rotate(-0.5deg);
202 }
203 12%{
204 -ms-transform:translate(-8px, 6px) rotate(-2.5deg);
205 }
206 14%{
207 -ms-transform:translate(7px, 5px) rotate(-1.5deg);
208 }
209 16%{
210 -ms-transform:translate(2px, 2px) rotate(1.5deg);
211 }
212 18%{
213 -ms-transform:translate(8px, -2px) rotate(-3.5deg);
214 }
215 20%{
216 -ms-transform:translate(-9px, 3px) rotate(-3.5deg);
217 }
218 22%{
219 -ms-transform:translate(8px, -4px) rotate(-1.5deg);
220 }
221 24%{
222 -ms-transform:translate(-1px, -7px) rotate(2.5deg);
223 }
224 26%{
225 -ms-transform:translate(9px, 9px) rotate(-0.5deg);
226 }
227 28%{
228 -ms-transform:translate(9px, -4px) rotate(-3.5deg);
229 }
230 30%{
231 -ms-transform:translate(6px, -7px) rotate(-0.5deg);
232 }
233 32%{
234 -ms-transform:translate(9px, 2px) rotate(1.5deg);
235 }
236 34%{
237 -ms-transform:translate(3px, -9px) rotate(2.5deg);
238 }
239 36%{
240 -ms-transform:translate(-6px, -4px) rotate(2.5deg);
241 }
242 38%{
243 -ms-transform:translate(-5px, -9px) rotate(0.5deg);
244 }
245 40%{
246 -ms-transform:translate(6px, 9px) rotate(-2.5deg);
247 }
248 42%{
249 -ms-transform:translate(5px, -5px) rotate(0.5deg);
250 }
251 44%{
252 -ms-transform:translate(8px, 5px) rotate(-3.5deg);
253 }
254 46%{
255 -ms-transform:translate(-2px, 9px) rotate(1.5deg);
256 }
257 48%{
258 -ms-transform:translate(-10px, -5px) rotate(-2.5deg);
259 }
260 50%{
261 -ms-transform:translate(8px, -1px) rotate(-3.5deg);
262 }
263 52%{
264 -ms-transform:translate(-5px, -7px) rotate(2.5deg);
265 }
266 54%{
267 -ms-transform:translate(7px, 0px) rotate(2.5deg);
268 }
269 56%{
270 -ms-transform:translate(-5px, -1px) rotate(-0.5deg);
271 }
272 58%{
273 -ms-transform:translate(0px, -4px) rotate(-3.5deg);
274 }
275 60%{
276 -ms-transform:translate(-10px, 2px) rotate(2.5deg);
277 }
278 62%{
279 -ms-transform:translate(9px, 8px) rotate(0.5deg);
280 }
281 64%{
282 -ms-transform:translate(-4px, -4px) rotate(-1.5deg);
283 }
284 66%{
285 -ms-transform:translate(-1px, -9px) rotate(-0.5deg);
286 }
287 68%{
288 -ms-transform:translate(-6px, -9px) rotate(-2.5deg);
289 }
290 70%{
291 -ms-transform:translate(-6px, -8px) rotate(-1.5deg);
292 }
293 72%{
294 -ms-transform:translate(-2px, -3px) rotate(-2.5deg);
295 }
296 74%{
297 -ms-transform:translate(-8px, 1px) rotate(-0.5deg);
298 }
299 76%{
300 -ms-transform:translate(-7px, 7px) rotate(2.5deg);
301 }
302 78%{
303 -ms-transform:translate(7px, 2px) rotate(-3.5deg);
304 }
305 80%{
306 -ms-transform:translate(-10px, -4px) rotate(-0.5deg);
307 }
308 82%{
309 -ms-transform:translate(2px, -9px) rotate(1.5deg);
310 }
311 84%{
312 -ms-transform:translate(3px, 5px) rotate(1.5deg);
313 }
314 86%{
315 -ms-transform:translate(5px, 2px) rotate(2.5deg);
316 }
317 88%{
318 -ms-transform:translate(-5px, -1px) rotate(-1.5deg);
319 }
320 90%{
321 -ms-transform:translate(-1px, -9px) rotate(1.5deg);
322 }
323 92%{
324 -ms-transform:translate(8px, -6px) rotate(-3.5deg);
325 }
326 94%{
327 -ms-transform:translate(7px, -9px) rotate(-2.5deg);
328 }
329 96%{
330 -ms-transform:translate(4px, -5px) rotate(2.5deg);
331 }
332 98%{
333 -ms-transform:translate(8px, 0px) rotate(-3.5deg);
334 }
335 }336 @keyframes shake-slow{
337 0% {338 transform:translate(0px, 0px) rotate(0deg);
339 }
340 2%{
341 transform:translate(-6px, -8px) rotate(2.5deg);
342 }
343 4%{
344 transform:translate(3px, -9px) rotate(-0.5deg);
345 }
346 6%{
347 transform:translate(3px, -8px) rotate(2.5deg);
348 }
349 8%{
350 transform:translate(0px, 5px) rotate(0.5deg);
351 }
352 10%{
353 transform:translate(3px, 2px) rotate(0.5deg);
354 }
355 12%{
356 transform:translate(8px, 0px) rotate(0.5deg);
357 }
358 14%{
359 transform:translate(4px, 7px) rotate(-3.5deg);
360 }
361 16%{
362 transform:translate(-4px, 0px) rotate(-0.5deg);
363 }
364 18%{
365 transform:translate(1px, 3px) rotate(-1.5deg);
366 }
367 20%{
368 transform:translate(-8px, -1px) rotate(-3.5deg);
369 }
370 22%{
371 transform:translate(5px, 9px) rotate(2.5deg);
372 }
373 24%{
374 transform:translate(-9px, -10px) rotate(-2.5deg);
375 }
376 26%{
377 transform:translate(0px, 7px) rotate(-1.5deg);
378 }
379 28%{
380 transform:translate(-10px, 7px) rotate(2.5deg);
381 }
382 30%{
383 transform:translate(8px, -7px) rotate(-1.5deg);
384 }
385 32%{
386 transform:translate(0px, -8px) rotate(-0.5deg);
387 }
388 34%{
389 transform:translate(9px, 7px) rotate(-0.5deg);
390 }
391 36%{
392 transform:translate(-7px, 6px) rotate(0.5deg);
393 }
394 38%{
395 transform:translate(8px, -10px) rotate(-0.5deg);
396 }
397 40%{
398 transform:translate(8px, 0px) rotate(0.5deg);
399 }
400 42%{
401 transform:translate(0px, -2px) rotate(1.5deg);
402 }
403 44%{
404 transform:translate(5px, -2px) rotate(-0.5deg);
405 }
406 46%{
407 transform:translate(1px, -10px) rotate(-2.5deg);
408 }
409 48%{
410 transform:translate(4px, -1px) rotate(2.5deg);
411 }
412 50%{
413 transform:translate(-5px, -4px) rotate(2.5deg);
414 }
415 52%{
416 transform:translate(3px, 2px) rotate(-3.5deg);
417 }
418 54%{
419 transform:translate(1px, -6px) rotate(-0.5deg);
420 }
421 56%{
422 transform:translate(-3px, -4px) rotate(-0.5deg);
423 }
424 58%{
425 transform:translate(-10px, -10px) rotate(2.5deg);
426 }
427 60%{
428 transform:translate(8px, 7px) rotate(-3.5deg);
429 }
430 62%{
431 transform:translate(9px, -6px) rotate(-3.5deg);
432 }
433 64%{
434 transform:translate(-5px, 8px) rotate(-0.5deg);
435 }
436 66%{
437 transform:translate(1px, -3px) rotate(0.5deg);
438 }
439 68%{
440 transform:translate(-6px, 9px) rotate(1.5deg);
441 }
442 70%{
443 transform:translate(-5px, 8px) rotate(-1.5deg);
444 }
445 72%{
446 transform:translate(-10px, -2px) rotate(2.5deg);
447 }
448 74%{
449 transform:translate(0px, -4px) rotate(1.5deg);
450 }
451 76%{
452 transform:translate(-2px, -5px) rotate(0.5deg);
453 }
454 78%{
455 transform:translate(-2px, 9px) rotate(-3.5deg);
456 }
457 80%{
458 transform:translate(7px, 4px) rotate(-3.5deg);
459 }
460 82%{
461 transform:translate(-1px, -4px) rotate(-1.5deg);
462 }
463 84%{
464 transform:translate(3px, -6px) rotate(0.5deg);
465 }
466 86%{
467 transform:translate(7px, -8px) rotate(-1.5deg);
468 }
469 88%{
470 transform:translate(4px, -9px) rotate(1.5deg);
471 }
472 90%{
473 transform:translate(1px, -6px) rotate(2.5deg);
474 }
475 92%{
476 transform:translate(-8px, -1px) rotate(-1.5deg);
477 }
478 94%{
479 transform:translate(-4px, -1px) rotate(0.5deg);
480 }
481 96%{
482 transform:translate(-6px, 9px) rotate(1.5deg);
483 }
484 98%{
485 transform:translate(7px, 4px) rotate(-0.5deg);
486 }
487 }