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/
随机推荐
- Python - 3.6 学习第一天
开始之前 基础示例 Python语法基础,python语法比较简单,采用缩紧方式. # print absolute value of a integer a = 100 if a >= 0: ...
- Ant教程
安装ant,去http://ant.apache.org下载 配置环境变量(前提是配置了java环境变量) ANT_HOME G:\Software\ant1.9.7 //ant根目录 在PATH后添 ...
- redis数据持久化（快照/日志）：
1.RDB快照的配置选项: save // 900内,有1条写入,则产生快照 save // 如果300秒内有1000次写入,则产生快照 save // 如果60秒内有10000次写入,则产生快照 ( ...
- SELECT INTO 和 INSERT INTO SELECT
做数据库开发的过程中难免会遇到有表数据备份的,而SELECT INTO……和INSERT INTO SELECT…… 这两种语句就是用来进行表数据复制,下面简单的介绍下: 1.INSERT INTO ...
- Linux Git服务器安装
① 安装 Git ② 服务器端创建 git 用户,用来管理 Git 服务,并为 git 用户设置密码 ③ 服务器端创建 Git 仓库 ④ 客户端 clone 远程仓库 ⑤ 客户端创建 SSH 公钥和私 ...
- MVC视图布局页常用代码
1.在视图 Views 中新建文件夹 Shared 2.在 Shared 中新建布局页-母版页 _Layout.cshtml @{ Layout = null; } <!DOCTYPE h ...
- Python开发【模块】：BeautifulSoup
BeautifulSoup BeautifulSoup是一个模块,该模块用于接收一个HTML或XML字符串,然后将其进行格式化,之后遍可以使用他提供的方法进行快速查找指定元素,从而使得在HTML或XM ...
- python面向对象(类和对象及三大特性)
类和对象是什么 创建类 新式类 和 经典类 面向对象三大特性 继承 封装 多态 面向对象是一种编程方式,此编程方式的实现是基于对 类 和 对象 的使用 类 是一个模板,模板中包装了多个“函数”供使 ...
- Celery最佳实践（转）
原文:http://my.oschina.net/siddontang/blog/284107 英文原文:https://denibertovic.com/posts/celery-best-prac ...
- 《Java程序猿面试笔试宝典》之Java程序初始化的顺序是如何的
在Java语言中.当实例化对象时.对象所在类的全部成员变量首先要进行初始化,仅仅有当全部类成员完毕初始化后,才会调用对象所在类的构造函数创建对象. Java程序的初始化一般遵循以下三个原则(以下 ...