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/
随机推荐
- OC开发_Storyboard——UIApplication和网络活动指示器
一.UIApplication 只有一个实例: UIApplication *myApplication = [UIApplication sharedApplication]; 属性如果设置为YES ...
- 微信小程序 --- 模板的使用
由于微信小程序文件大小的限制,可以把一些公用的文件 单离出来形成模板,从而被各个模板引用: 定义模板第一种方式: 新建一个目录: 写入: <text>hello world</tex ...
- Hadoop命令别名
[hadoop@master ~]$ alias hdfs='hadoop dfs' [hadoop@master ~]$ hdfs -ls / drwxrwxr-x - hadoop super ...
- 170628、springboot编程之Druid数据源和监控配置一
Spring Boot默认的数据源是:org.apache.tomcat.jdbc.pool.DataSource,那么如何修改数据源呢?我已目前使用比较多的阿里数据源Druid为例,如果使用其他的数 ...
- win10配置的静态/动态IP和 DNS的方法
1.配置静态IP和DNS netsh interface ip set address name="以太网" source=static addr=192.168.9.145 ma ...
- a Javascript library for training Deep Learning models
w强化算法和数学,来迎接机器学习.神经网络. http://cs.stanford.edu/people/karpathy/convnetjs/ ConvNetJS is a Javascript l ...
- python为什么需要reload(sys)后设置编码
python在安装时,默认的编码是ascii,当程序中出现非ascii编码时,python的处理常常会报这样的错UnicodeDecodeError: 'ascii' codec can't deco ...
- 数据库SQL优化大总结之百万级数据库优化方案（转）
add by zhj: 作者没有指定是哪个数据库,这只是一个近似通用的总结.对于某个特定的数据库,有些条目可能并不适用. 原文:http://www.cnblogs.com/yunfeifei/p/3 ...
- 【我的Android进阶之旅】解决Android Studio 运行gradle命令时报错: 错误: 编码GBK的不可映射字符
1.问题描述 最近在负责公司基础业务和移动基础设施的开发工作,正在负责Lint代码静态检查工作.因此编写了自定义的Lint规则,在调试过程中,编译的时候出现了如下所示的错误: 部分输出日志如下所示: ...
- 调试：Spring AOP执行过程
调试项目:https://github.com/1367356/laboratoryWeb 断点位置 点击查询:http://localhost:9002/queryNews?htmlid=15318 ...