您的位置：首页 > Web前端 > HTML5

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

2014-02-19 22:33 302 查看

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

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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航