纯css抖动效果

ProsperLee

发布于 2018-10-24 02:43:58

3.9K02

代码可运行

文章被收录于专栏：互联网软件技术互联网软件技术

运行总次数：2

代码可运行

HTML：

1 <button class="shake">按钮</button>

CSS：

  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 }