先看效果（把鼠标移上去看看）
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>