css3 抖动
1. html
<div id="wrapper">
<section>
<p class="shake freez shake-hard">shake-hard</p>
</section>
<img class="shake shake-hard" src="img/1.png" alt="musica_byern" width="600">
</div>
2. css
#wrapper {
margin: 0 auto;
width: 90%;
text-align: center;
}
#wrapper p {
font-family: helvetica;
font-weight: bold;
font-size: 80px;
color: red;
}
/* fn */
.shake {
display: inline-block;
-webkit-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center
}
.shake:hover {
-webkit-animation-name: shake-base;
-ms-animation-name: shake-base;
animation-name: shake-base;
-webkit-animation-duration: 100ms;
-ms-animation-duration: 100ms;
animation-duration: 100ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running
}
.shake.freez {
-webkit-animation-play-state: paused !important;
-ms-animation-play-state: paused !important;
animation-play-state: paused !important
}
.shake.freez.shake-hard {
-webkit-animation-name: shake-hard;
-ms-animation-name: shake-hard;
animation-name: shake-hard;
-webkit-animation-duration: 100ms;
-ms-animation-duration: 100ms;
animation-duration: 100ms;
-webkit-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: ease-in-out;
-ms-animation-timing-function: ease-in-out;
animation-timing-function: ease-in-out;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-play-state: running;
-ms-animation-play-state: running;
animation-play-state: running
}
@-webkit-keyframes shake-hard {
0% {
-webkit-transform: translate(0px, 0px) rotate(0deg)
}
2% {
-webkit-transform: translate(5px, -4px) rotate(-2.5deg)
}
4% {
-webkit-transform: translate(-10px, 5px) rotate(2.5deg)
}
6% {
-webkit-transform: translate(0px, 5px) rotate(-3.5deg)
}
8% {
-webkit-transform: translate(-6px, -10px) rotate(-1.5deg)
}
10% {
-webkit-transform: translate(2px, -7px) rotate(1.5deg)
}
12% {
-webkit-transform: translate(0px, 1px) rotate(0.5deg)
}
14% {
-webkit-transform: translate(7px, -9px) rotate(-0.5deg)
}
16% {
-webkit-transform: translate(-8px, 4px) rotate(-2.5deg)
}
18% {
-webkit-transform: translate(-9px, -4px) rotate(-0.5deg)
}
20% {
-webkit-transform: translate(-8px, -8px) rotate(0.5deg)
}
22% {
-webkit-transform: translate(-7px, 0px) rotate(-0.5deg)
}
24% {
-webkit-transform: translate(-10px, -5px) rotate(-3.5deg)
}
26% {
-webkit-transform: translate(1px, -10px) rotate(-0.5deg)
}
28% {
-webkit-transform: translate(5px, 2px) rotate(-1.5deg)
}
30% {
-webkit-transform: translate(-8px, 5px) rotate(-0.5deg)
}
32% {
-webkit-transform: translate(-4px, 2px) rotate(1.5deg)
}
34% {
-webkit-transform: translate(-9px, 8px) rotate(1.5deg)
}
36% {
-webkit-transform: translate(8px, -3px) rotate(1.5deg)
}
38% {
-webkit-transform: translate(-10px, 7px) rotate(-0.5deg)
}
40% {
-webkit-transform: translate(-7px, 1px) rotate(-3.5deg)
}
42% {
-webkit-transform: translate(-9px, 7px) rotate(0.5deg)
}
44% {
-webkit-transform: translate(4px, 2px) rotate(-3.5deg)
}
46% {
-webkit-transform: translate(8px, 4px) rotate(2.5deg)
}
48% {
-webkit-transform: translate(-5px, -1px) rotate(-2.5deg)
}
50% {
-webkit-transform: translate(-7px, 5px) rotate(-2.5deg)
}
52% {
-webkit-transform: translate(-1px, -7px) rotate(-3.5deg)
}
54% {
-webkit-transform: translate(-2px, -3px) rotate(0.5deg)
}
56% {
-webkit-transform: translate(-4px, -6px) rotate(-2.5deg)
}
58% {
-webkit-transform: translate(5px, 4px) rotate(-2.5deg)
}
60% {
-webkit-transform: translate(-3px, 2px) rotate(-0.5deg)
}
62% {
-webkit-transform: translate(-4px, -10px) rotate(-1.5deg)
}
64% {
-webkit-transform: translate(-4px, -9px) rotate(-2.5deg)
}
66% {
-webkit-transform: translate(3px, -8px) rotate(-1.5deg)
}
68% {
-webkit-transform: translate(-5px, -2px) rotate(0.5deg)
}
70% {
-webkit-transform: translate(-3px, -1px) rotate(-3.5deg)
}
72% {
-webkit-transform: translate(9px, -2px) rotate(0.5deg)
}
74% {
-webkit-transform: translate(7px, -6px) rotate(-2.5deg)
}
76% {
-webkit-transform: translate(1px, 2px) rotate(-1.5deg)
}
78% {
-webkit-transform: translate(-3px, -5px) rotate(-1.5deg)
}
80% {
-webkit-transform: translate(-5px, 3px) rotate(2.5deg)
}
82% {
-webkit-transform: translate(-2px, -1px) rotate(-3.5deg)
}
84% {
-webkit-transform: translate(-8px, 7px) rotate(0.5deg)
}
86% {
-webkit-transform: translate(-2px, 4px) rotate(-0.5deg)
}
88% {
-webkit-transform: translate(4px, 7px) rotate(-3.5deg)
}
90% {
-webkit-transform: translate(2px, 7px) rotate(0.5deg)
}
92% {
-webkit-transform: translate(-3px, 6px) rotate(-3.5deg)
}
94% {
-webkit-transform: translate(1px, 8px) rotate(1.5deg)
}
96% {
-webkit-transform: translate(-8px, -2px) rotate(1.5deg)
}
98% {
-webkit-transform: translate(-5px, 6px) rotate(0.5deg)
}
}
@-ms-keyframes shake-hard {
0% {
-ms-transform: translate(0px, 0px) rotate(0deg)
}
2% {
-ms-transform: translate(-1px, 3px) rotate(-1.5deg)
}
4% {
-ms-transform: translate(0px, -6px) rotate(2.5deg)
}
6% {
-ms-transform: translate(3px, 6px) rotate(-0.5deg)
}
8% {
-ms-transform: translate(-1px, -7px) rotate(0.5deg)
}
10% {
-ms-transform: translate(-3px, -2px) rotate(-2.5deg)
}
12% {
-ms-transform: translate(-6px, 7px) rotate(-3.5deg)
}
14% {
-ms-transform: translate(4px, -4px) rotate(1.5deg)
}
16% {
-ms-transform: translate(-1px, 4px) rotate(0.5deg)
}
18% {
-ms-transform: translate(2px, 9px) rotate(0.5deg)
}
20% {
-ms-transform: translate(-4px, -2px) rotate(0.5deg)
}
22% {
-ms-transform: translate(0px, 1px) rotate(0.5deg)
}
24% {
-ms-transform: translate(-2px, 0px) rotate(1.5deg)
}
26% {
-ms-transform: translate(3px, -2px) rotate(-3.5deg)
}
28% {
-ms-transform: translate(4px, -9px) rotate(-0.5deg)
}
30% {
-ms-transform: translate(6px, -7px) rotate(2.5deg)
}
32% {
-ms-transform: translate(6px, -9px) rotate(-2.5deg)
}
34% {
-ms-transform: translate(1px, 4px) rotate(-3.5deg)
}
36% {
-ms-transform: translate(7px, -5px) rotate(-0.5deg)
}
38% {
-ms-transform: translate(9px, -6px) rotate(-1.5deg)
}
40% {
-ms-transform: translate(-7px, 6px) rotate(2.5deg)
}
42% {
-ms-transform: translate(-8px, -9px) rotate(0.5deg)
}
44% {
-ms-transform: translate(-9px, -6px) rotate(1.5deg)
}
46% {
-ms-transform: translate(6px, 6px) rotate(-3.5deg)
}
48% {
-ms-transform: translate(-6px, 9px) rotate(-1.5deg)
}
50% {
-ms-transform: translate(8px, 1px) rotate(2.5deg)
}
52% {
-ms-transform: translate(-8px, 2px) rotate(-3.5deg)
}
54% {
-ms-transform: translate(3px, 3px) rotate(0.5deg)
}
56% {
-ms-transform: translate(-7px, -7px) rotate(0.5deg)
}
58% {
-ms-transform: translate(-6px, -5px) rotate(0.5deg)
}
60% {
-ms-transform: translate(-4px, 9px) rotate(-3.5deg)
}
62% {
-ms-transform: translate(-2px, -4px) rotate(-3.5deg)
}
64% {
-ms-transform: translate(9px, -2px) rotate(-3.5deg)
}
66% {
-ms-transform: translate(-4px, 0px) rotate(-0.5deg)
}
68% {
-ms-transform: translate(3px, -2px) rotate(-2.5deg)
}
70% {
-ms-transform: translate(6px, -6px) rotate(-3.5deg)
}
72% {
-ms-transform: translate(4px, -6px) rotate(-3.5deg)
}
74% {
-ms-transform: translate(1px, 7px) rotate(-0.5deg)
}
76% {
-ms-transform: translate(-2px, 8px) rotate(2.5deg)
}
78% {
-ms-transform: translate(2px, -2px) rotate(-1.5deg)
}
80% {
-ms-transform: translate(6px, 8px) rotate(0.5deg)
}
82% {
-ms-transform: translate(0px, 0px) rotate(-3.5deg)
}
84% {
-ms-transform: translate(-5px, -5px) rotate(-2.5deg)
}
86% {
-ms-transform: translate(-3px, 2px) rotate(2.5deg)
}
88% {
-ms-transform: translate(7px, -9px) rotate(-2.5deg)
}
90% {
-ms-transform: translate(5px, -5px) rotate(-3.5deg)
}
92% {
-ms-transform: translate(-2px, 8px) rotate(0.5deg)
}
94% {
-ms-transform: translate(-5px, -9px) rotate(-2.5deg)
}
96% {
-ms-transform: translate(8px, -9px) rotate(0.5deg)
}
98% {
-ms-transform: translate(-9px, 4px) rotate(1.5deg)
}
}
@keyframes shake-hard {
0% {
transform: translate(0px, 0px) rotate(0deg)
}
2% {
transform: translate(0px, 4px) rotate(0.5deg)
}
4% {
transform: translate(6px, -2px) rotate(-3.5deg)
}
6% {
transform: translate(-3px, -8px) rotate(-2.5deg)
}
8% {
transform: translate(-1px, 9px) rotate(2.5deg)
}
10% {
transform: translate(6px, 5px) rotate(-2.5deg)
}
12% {
transform: translate(-3px, 6px) rotate(-2.5deg)
}
14% {
transform: translate(-9px, 1px) rotate(-0.5deg)
}
16% {
transform: translate(-6px, 5px) rotate(2.5deg)
}
18% {
transform: translate(-9px, 8px) rotate(0.5deg)
}
20% {
transform: translate(-9px, 6px) rotate(-2.5deg)
}
22% {
transform: translate(-5px, 6px) rotate(0.5deg)
}
24% {
transform: translate(6px, 3px) rotate(1.5deg)
}
26% {
transform: translate(8px, -10px) rotate(-2.5deg)
}
28% {
transform: translate(0px, -5px) rotate(-3.5deg)
}
30% {
transform: translate(6px, -10px) rotate(2.5deg)
}
32% {
transform: translate(3px, 0px) rotate(-3.5deg)
}
34% {
transform: translate(4px, -6px) rotate(-3.5deg)
}
36% {
transform: translate(-5px, 4px) rotate(-0.5deg)
}
38% {
transform: translate(-7px, -6px) rotate(-1.5deg)
}
40% {
transform: translate(4px, -9px) rotate(-3.5deg)
}
42% {
transform: translate(-9px, -2px) rotate(-1.5deg)
}
44% {
transform: translate(0px, -3px) rotate(1.5deg)
}
46% {
transform: translate(-5px, -5px) rotate(-2.5deg)
}
48% {
transform: translate(-6px, 2px) rotate(-3.5deg)
}
50% {
transform: translate(0px, -5px) rotate(-1.5deg)
}
52% {
transform: translate(6px, 1px) rotate(-2.5deg)
}
54% {
transform: translate(9px, 6px) rotate(2.5deg)
}
56% {
transform: translate(-8px, -10px) rotate(-0.5deg)
}
58% {
transform: translate(6px, -2px) rotate(-1.5deg)
}
60% {
transform: translate(-4px, -8px) rotate(-1.5deg)
}
62% {
transform: translate(0px, -9px) rotate(0.5deg)
}
64% {
transform: translate(-7px, -6px) rotate(2.5deg)
}
66% {
transform: translate(8px, 6px) rotate(2.5deg)
}
68% {
transform: translate(-10px, -7px) rotate(-2.5deg)
}
70% {
transform: translate(-1px, 9px) rotate(-2.5deg)
}
72% {
transform: translate(-6px, 8px) rotate(-2.5deg)
}
74% {
transform: translate(2px, 5px) rotate(-1.5deg)
}
76% {
transform: translate(-7px, 6px) rotate(1.5deg)
}
78% {
transform: translate(3px, -9px) rotate(0.5deg)
}
80% {
transform: translate(-4px, -9px) rotate(-1.5deg)
}
82% {
transform: translate(0px, 7px) rotate(0.5deg)
}
84% {
transform: translate(-4px, -3px) rotate(-1.5deg)
}
86% {
transform: translate(-10px, 8px) rotate(-0.5deg)
}
88% {
transform: translate(-9px, 1px) rotate(-0.5deg)
}
90% {
transform: translate(-3px, 6px) rotate(1.5deg)
}
92% {
transform: translate(-8px, -10px) rotate(-3.5deg)
}
94% {
transform: translate(-8px, -7px) rotate(2.5deg)
}
96% {
transform: translate(-2px, 1px) rotate(2.5deg)
}
98% {
transform: translate(-3px, 4px) rotate(-2.5deg)
}
}
css3 抖动的更多相关文章
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
- Css3抖动
http://files.cnblogs.com/xinlinux/csshake.min.css <div class="shake">AAA</div> ...
- 如何用css3实现一个图片的抖动或者弹跳
<li onmouseout="this.className='off'"><a href=""><img src=". ...
- css3 序列帧动画抖动
页面需要一个动画,设计师给了动画的序列帧 项目由vue构建,使用css3做动画 html <div class="work_two_main"></div> ...
- 解析css3 shake 抖动样式
前端时间做项目发现一抖动按钮挺吸引眼球的,研究了下实现原理,在此和大家分享下: CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的 ...
- CSS3 transform rotate（旋转）锯齿/元素抖动模糊的解决办法
使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...
- CSS3动画之按钮抖动
今天要分享一组代码,当鼠标悬停在按钮上时.按钮抖动!!! <!DOCTYPE html> <html lang="en"> <head> < ...
- css3 @keyframe 抖动/变色动画
一.纯css实现 .shake{ //抖动的元素 width: 200px; height: 100px; margin: 50px auto; background: ...
- css3鼠标悬停图片抖动效果
提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/
随机推荐
- 扫描二维码的实现(barcode) ---- HTML5+
模块:barcode Barcode模块管理条码扫描,提供常见的条码(二维码及一维码)的扫描识别功能,可调用设备的摄像头对条码图片扫描进行数据输入.通过plus.barcode可获取条码码管理对象. ...
- 河南省第七届ACM程序设计大赛总结
省赛总结 首先说说比赛时的情况吧,刚开始的时候我的任务就是翻译英文题目,找出比较水的题目,他们两个直接找中文水题切,其实每次比赛我们都是这样配合的,由于他们的判题系统一开始存在问题,交的正确的代码给判 ...
- Java的Object.hashCode()的返回值到底是不是对象内存地址？
关于这个问题,查阅了网上的资料,发现证明过程太繁琐,这里我用了反证法. java.lang.Object.hashCode()的返回值到底是不是对象内存地址? hashCode契约 说到这个问题,大家 ...
- MYSQL查看数据表最后更新时间
MYSQL查看数据表最后更新时间 - 拨云见日 - CSDN博客 https://blog.csdn.net/warnerwu/article/details/73352774 mysql> S ...
- socket协议和http协议性能对比
最近做了一次队列服务的性能测试,是通过两种协议windows socket和http分别往内存中写入url.对比哪种协议的效果更高,下图是测试结果.此次使用的工具是loadrunner.在压socke ...
- modelform动态显示select标签的对象范围
既根据当前登录人,动态显示对象相关的的select的选项,例如 A登录,只显示A的客户,B登录,只显示B自己的客户 先了解form的ModelChoiceField字段(这个表格没意义,就是引出参数q ...
- 【Loadrunner】如何通过loadrunner利用代理对手机端Web浏览器及APP进行录制？
以下为作者操作并最终可以成功录制脚本并调试成功的方法实际操作中记录截图,都是干货哦~ 1.安装lr11补丁 百度网盘下载链接:https://pan.baidu.com/s/1TPoaAMYvi1cw ...
- windows 系统无法启动windows event log 服务
windows 系统无法启动windows event log 服务 关键词:无法启动系统事件日志 尝试解决步骤 [1]权限:把如图中logsfile文件等都给local service [2]把C: ...
- loadNibNamed:(NSString *)name owner:(nullable id)owner options:(nullable NSDictionary *)options用法
1.name xib的名字 owner当前类对象 options初始参数 实际应用: NSArray *nibs = [[NSBundle mainBundle] loadNibNamed:@&quo ...
- 有关ros::spin()和ros::spinonce()若干感受
ros::spinonce()一般与loop_rate.sleep()同时出现,用来控制处理回调函数的频率,并且没有消息就收来时,就会程序堵塞,不会占用CPU资源. ros::spin(),用于回调函 ...