CSS3+HTML5特效5

先看效果（把鼠标移上去看看）

abcd

这个效果很简单，就是移动文字的位置模拟出震动的效果。

Css

 1 <style>
 2 @-webkit-keyframes shake {
 3     0%{
 4         -webkit-transform:translate(2px, 2px);
 5     }
 6     25%{
 7         -webkit-transform:translate(-2px, -2px);
 8     }
 9     50%{
10         -webkit-transform:translate(0px, 0px);
11     }
12     75%{
13         -webkit-transform:translate(2px, -2px);
14     }
15     100%{
16         -webkit-transform:translate(-2px, 2px);
17     }
18 }
19 @keyframes shake {
20     0%{
21         transform:translate(2px, 2px);
22     }
23     25%{
24         transform:translate(-2px, -2px);
25     }
26     50%{
27         transform:translate(0px, 0px);
28     }
29     75%{
30         transform:translate(2px, -2px);
31     }
32     100%{
33         transform:translate(-2px, 2px);
34     }
35 }
36 .shake{
37     position: relative;
38     top: 30px;
39     left: 100px;
40     width: 200px;
41     color: #0000ff;
42 }
43 .shake:hover{
44     -webkit-animation:shake 0.2s infinite;
45     animation:shake 0.2s infinite;
46 }
47 </style>

Html

1 <div class="shake">abcd</div>