CSS3+HTML5特效5 - 震动的文字
2024-08-23 19:39:44
先看效果（把鼠标移上去看看）
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>
最新文章
- Android开发学习—— activity
- xamarin UWP自定义圆角按钮
- 转-Spring Framework中的AOP之around通知
- hadoop2.2.0伪分布式搭建2--安装JDK
- Codeforces Round #342 （Div 2） 解题报告
- 超快速使用docker在本地搭建hadoop分布式集群
- 正确处理Windows电源事件
- 格式化一个文件的大小（size），或者说是格式化一个app的大小（size）
- 对象this的引用
- Spring学习（23）--- AOP之Introductions应用
- Modelsim调用用do脚本自动化仿真
- 用SQL语言操作数据
- bzoj1477: 青蛙的约会（exgcd）
- document数据路由
- P1547 Out of Hay
- LeetCode 958. 二叉树的完全性检验
- JQuery判断数组中是否包含某个字符串
- 大数据【一】集群配置及ssh免密认证
- Javascript 地图库收集
- [Linux实用工具]munin-node插件配置和插件编写