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

浏览数：199 / 时间：2015年06月09日

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

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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： color html java http c top t class it 代码 a color html java http c top t class it 代码 a

相关文章

随机文章

您可能还喜欢

您可能还喜欢