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>