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>