纯css抖动效果

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 }

快点开我！

展示：

原文地址：https://www.cnblogs.com/lprosper/p/9320670.html

时间： 2024-07-31 14:52:51

纯css抖动效果的相关文章

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享

外贸建站之纯CSS动画效果天之蓝滚动的白云代码分享 /*改写chinaobd2.com Begin*/ /*如有定义header, footer 注意设置相应的位置,颜色等*/ body { padding-top: 0px; } @media (max-width: 577px) { body { padding-top: 35px; } } /*应用效果:未应用效果时可直接清除*/ @media (min-width: 768px) { header { background: #0064A

纯css手风琴效果

1 <!doctype html> 2 <html lang="zh-cn"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>纯css写的一个手风琴效果供大家学习</title> 6 <style> 7 * { margin: 0; padding: 0; } 8 body{background: #eee} 9 .e-warp { width

简单实用的纯css按钮效果

在许多网站中都需要实用到按钮,一个好看实用的css按钮即可以给访问者以美感,又可以方便开发者.下面就是一个纯css按钮,需要的可以参考. css代码 .div { display: inline-block; padding: .3em .5em; background-image: linear-gradient(#ddd, #bbb); border: 1px solid rgba(0,0,0,.2); border-radius: .3em; box-shadow: 0 1px white

纯css提示效果 提示层

<!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN"><HTML> <HEAD> <TITLE> New Document </TITLE> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <META NAM

纯CSS实现的二级下拉菜单效果代码实例

纯CSS实现的二级下拉菜单效果代码实例:二级下拉是最为常用的效果之一,当前的此效果一般哟结合js实现,本章节介绍一个使用纯CSS实现的二级下拉菜单效果,希望能够给需要的朋友带来一定的帮助,不过此代码也有一点浏览器兼容问题,那就是在IE6中不兼容.代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" conten

纯css实现照片墙3D效果

每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自己动手试试. v直接上代码 这篇博客呢就是演示一个照片墙的效果.所以废话不多说,直接上代码然后展示特效.有兴趣的道友可以自己练练手试试.也可以改动改动其中的属性多玩玩,自己测试的时候建议用美女的照片,绝对"乐在其中". 1.准备材料:  准备材料就是没什么材料,自己麻溜赶快的去:百度找几张

HTML5 CSS3专题 纯CSS打造相册效果

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这样的一个例子,感觉效果还不错,不记得啥时候下载的了,也好久没上w3cfuns了,怀念学习前台的日子,给大家分享下. 效果图: 效果是不是还是很不错的,最主要的是没有使用一行js,这才是亮点. 先看html文件: <body> <div id="gallery"> <h1>纯CSS3相册效果&l

无聊，纯css写了个评分鼠标移入的效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta h

纯CSS弹出层，城市切换效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>纯CSS弹出层效果</title> <meta http-equiv="Content-Type" content="text