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

本文轉載自查看原文 2014-02-19 22:33 4099 HTML5/ CSS3

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

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 基於HTML5+CSS3的圖片旋轉、無限滾動、文字跳動特效讓Vs2010支持 Css3+HTML5 CSS特效（12）——文字下划波浪線 CSS震動效果 html5+css3圖片旋轉特效 js,jquery,css,html5特效 CSS3火焰文字特效制作教程盤點5個典型的CSS3文字特效 Html CSS transform matrix3d 3D轉場特效使用HTML 5/CSS3五步快速制作便簽貼特效