CSS3+HTML5特效5 - 震动的文字

先看效果(把鼠标移上去看看

abcd

 

 

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

 

Css

CSS3+HTML5特效5 - 震动的文字
 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>
CSS3+HTML5特效5 - 震动的文字

 

Html

CSS3+HTML5特效5 - 震动的文字
1 <div class="shake">abcd</div>
CSS3+HTML5特效5 - 震动的文字

CSS3+HTML5特效5 - 震动的文字

上一篇:Forget asp.net membership,ASP.NET Identity Overview


下一篇:你真的了解HTML吗?–雅虎面试题