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

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

abcd

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

Css

 <style>
 @-webkit-keyframes shake {
     0%{
         -webkit-transform:translate(2px, 2px);
     }
     25%{
         -webkit-transform:translate(-2px, -2px);
     }
     50%{
         -webkit-transform:translate(0px, 0px);
     }
     75%{
         -webkit-transform:translate(2px, -2px);
     }
     100%{
         -webkit-transform:translate(-2px, 2px);
     }
 }
 @keyframes shake {
     0%{
         transform:translate(2px, 2px);
     }
     25%{
         transform:translate(-2px, -2px);
     }
     50%{
         transform:translate(0px, 0px);
     }
     75%{
         transform:translate(2px, -2px);
     }
     100%{
         transform:translate(-2px, 2px);
     }
 }
 .shake{
     position: relative;
     top: 30px;
     left: 100px;
     width: 200px;
     color: #0000ff;
 }
 .shake:hover{
     -webkit-animation:shake 0.2s infinite;
     animation:shake 0.2s infinite;
 }
 </style>

Html

 <div class="shake">abcd</div>