纯css抖动效果
HTML：
<button class="shake">按钮</button>
CSS：
.shake{
width: 120px;
height: 33px;
border-radius: 66px;
background-color: #00ff00;
border:;
color: #fff;
font-weight: bold;
}
/* shake 按钮抖动 */
.shake:hover {
-webkit-animation-name: shake-slow;
-ms-animation-name: shake-slow;
animation-name: shake-slow;
-webkit-animation-duration: 5s;
-ms-animation-duration: 5s;
animation-duration: 5s;
-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-slow {
0% {
-webkit-transform: translate(0px, 0px) rotate(0deg);
}
2% {
-webkit-transform: translate(-1px, 8px) rotate(1.5deg);
}
4% {
-webkit-transform: translate(7px, 0px) rotate(-0.5deg);
}
6% {
-webkit-transform: translate(8px, 8px) rotate(-3.5deg);
}
8% {
-webkit-transform: translate(-4px, -3px) rotate(-1.5deg);
}
10% {
-webkit-transform: translate(5px, 0px) rotate(-2.5deg);
}
12% {
-webkit-transform: translate(-10px, -3px) rotate(-3.5deg);
}
14% {
-webkit-transform: translate(5px, 7px) rotate(2.5deg);
}
16% {
-webkit-transform: translate(8px, -8px) rotate(-1.5deg);
}
18% {
-webkit-transform: translate(9px, -6px) rotate(-3.5deg);
}
20% {
-webkit-transform: translate(3px, 1px) rotate(-0.5deg);
}
22% {
-webkit-transform: translate(6px, 8px) rotate(-2.5deg);
}
24% {
-webkit-transform: translate(-8px, -1px) rotate(2.5deg);
}
26% {
-webkit-transform: translate(7px, -10px) rotate(0.5deg);
}
28% {
-webkit-transform: translate(7px, -4px) rotate(-3.5deg);
}
30% {
-webkit-transform: translate(-2px, -6px) rotate(-1.5deg);
}
32% {
-webkit-transform: translate(-1px, 0px) rotate(2.5deg);
}
34% {
-webkit-transform: translate(6px, 2px) rotate(-0.5deg);
}
36% {
-webkit-transform: translate(2px, 7px) rotate(1.5deg);
}
38% {
-webkit-transform: translate(2px, -9px) rotate(1.5deg);
}
40% {
-webkit-transform: translate(-5px, -1px) rotate(-0.5deg);
}
42% {
-webkit-transform: translate(-8px, 2px) rotate(-0.5deg);
}
44% {
-webkit-transform: translate(-4px, 3px) rotate(0.5deg);
}
46% {
-webkit-transform: translate(-10px, -2px) rotate(-0.5deg);
}
48% {
-webkit-transform: translate(1px, 9px) rotate(1.5deg);
}
50% {
-webkit-transform: translate(6px, 7px) rotate(1.5deg);
}
52% {
-webkit-transform: translate(-8px, 4px) rotate(0.5deg);
}
54% {
-webkit-transform: translate(6px, -8px) rotate(-2.5deg);
}
56% {
-webkit-transform: translate(2px, -9px) rotate(-2.5deg);
}
58% {
-webkit-transform: translate(-2px, -9px) rotate(0.5deg);
}
60% {
-webkit-transform: translate(2px, 7px) rotate(-0.5deg);
}
62% {
-webkit-transform: translate(0px, 0px) rotate(-1.5deg);
}
64% {
-webkit-transform: translate(-9px, -4px) rotate(-3.5deg);
}
66% {
-webkit-transform: translate(6px, -6px) rotate(0.5deg);
}
68% {
-webkit-transform: translate(0px, -7px) rotate(-2.5deg);
}
70% {
-webkit-transform: translate(-10px, 1px) rotate(1.5deg);
}
72% {
-webkit-transform: translate(-7px, 9px) rotate(2.5deg);
}
74% {
-webkit-transform: translate(2px, -6px) rotate(-0.5deg);
}
76% {
-webkit-transform: translate(5px, 1px) rotate(-0.5deg);
}
78% {
-webkit-transform: translate(-1px, 5px) rotate(2.5deg);
}
80% {
-webkit-transform: translate(3px, 7px) rotate(2.5deg);
}
82% {
-webkit-transform: translate(-6px, -7px) rotate(-0.5deg);
}
84% {
-webkit-transform: translate(-8px, 8px) rotate(-2.5deg);
}
86% {
-webkit-transform: translate(8px, 3px) rotate(-2.5deg);
}
88% {
-webkit-transform: translate(-8px, 3px) rotate(-1.5deg);
}
90% {
-webkit-transform: translate(-7px, -4px) rotate(-3.5deg);
}
92% {
-webkit-transform: translate(-8px, 4px) rotate(2.5deg);
}
94% {
-webkit-transform: translate(-6px, -6px) rotate(-3.5deg);
}
96% {
-webkit-transform: translate(-3px, 2px) rotate(-3.5deg);
}
98% {
-webkit-transform: translate(2px, 1px) rotate(-0.5deg);
}
}
@-ms-keyframes shake-slow {
0% {
-ms-transform: translate(0px, 0px) rotate(0deg);
}
2% {
-ms-transform: translate(-9px, 1px) rotate(-1.5deg);
}
4% {
-ms-transform: translate(-10px, -1px) rotate(-3.5deg);
}
6% {
-ms-transform: translate(6px, 2px) rotate(-1.5deg);
}
8% {
-ms-transform: translate(-3px, -6px) rotate(-1.5deg);
}
10% {
-ms-transform: translate(-10px, -3px) rotate(-0.5deg);
}
12% {
-ms-transform: translate(-8px, 6px) rotate(-2.5deg);
}
14% {
-ms-transform: translate(7px, 5px) rotate(-1.5deg);
}
16% {
-ms-transform: translate(2px, 2px) rotate(1.5deg);
}
18% {
-ms-transform: translate(8px, -2px) rotate(-3.5deg);
}
20% {
-ms-transform: translate(-9px, 3px) rotate(-3.5deg);
}
22% {
-ms-transform: translate(8px, -4px) rotate(-1.5deg);
}
24% {
-ms-transform: translate(-1px, -7px) rotate(2.5deg);
}
26% {
-ms-transform: translate(9px, 9px) rotate(-0.5deg);
}
28% {
-ms-transform: translate(9px, -4px) rotate(-3.5deg);
}
30% {
-ms-transform: translate(6px, -7px) rotate(-0.5deg);
}
32% {
-ms-transform: translate(9px, 2px) rotate(1.5deg);
}
34% {
-ms-transform: translate(3px, -9px) rotate(2.5deg);
}
36% {
-ms-transform: translate(-6px, -4px) rotate(2.5deg);
}
38% {
-ms-transform: translate(-5px, -9px) rotate(0.5deg);
}
40% {
-ms-transform: translate(6px, 9px) rotate(-2.5deg);
}
42% {
-ms-transform: translate(5px, -5px) rotate(0.5deg);
}
44% {
-ms-transform: translate(8px, 5px) rotate(-3.5deg);
}
46% {
-ms-transform: translate(-2px, 9px) rotate(1.5deg);
}
48% {
-ms-transform: translate(-10px, -5px) rotate(-2.5deg);
}
50% {
-ms-transform: translate(8px, -1px) rotate(-3.5deg);
}
52% {
-ms-transform: translate(-5px, -7px) rotate(2.5deg);
}
54% {
-ms-transform: translate(7px, 0px) rotate(2.5deg);
}
56% {
-ms-transform: translate(-5px, -1px) rotate(-0.5deg);
}
58% {
-ms-transform: translate(0px, -4px) rotate(-3.5deg);
}
60% {
-ms-transform: translate(-10px, 2px) rotate(2.5deg);
}
62% {
-ms-transform: translate(9px, 8px) rotate(0.5deg);
}
64% {
-ms-transform: translate(-4px, -4px) rotate(-1.5deg);
}
66% {
-ms-transform: translate(-1px, -9px) rotate(-0.5deg);
}
68% {
-ms-transform: translate(-6px, -9px) rotate(-2.5deg);
}
70% {
-ms-transform: translate(-6px, -8px) rotate(-1.5deg);
}
72% {
-ms-transform: translate(-2px, -3px) rotate(-2.5deg);
}
74% {
-ms-transform: translate(-8px, 1px) rotate(-0.5deg);
}
76% {
-ms-transform: translate(-7px, 7px) rotate(2.5deg);
}
78% {
-ms-transform: translate(7px, 2px) rotate(-3.5deg);
}
80% {
-ms-transform: translate(-10px, -4px) rotate(-0.5deg);
}
82% {
-ms-transform: translate(2px, -9px) rotate(1.5deg);
}
84% {
-ms-transform: translate(3px, 5px) rotate(1.5deg);
}
86% {
-ms-transform: translate(5px, 2px) rotate(2.5deg);
}
88% {
-ms-transform: translate(-5px, -1px) rotate(-1.5deg);
}
90% {
-ms-transform: translate(-1px, -9px) rotate(1.5deg);
}
92% {
-ms-transform: translate(8px, -6px) rotate(-3.5deg);
}
94% {
-ms-transform: translate(7px, -9px) rotate(-2.5deg);
}
96% {
-ms-transform: translate(4px, -5px) rotate(2.5deg);
}
98% {
-ms-transform: translate(8px, 0px) rotate(-3.5deg);
}
}
@keyframes shake-slow {
0% {
transform: translate(0px, 0px) rotate(0deg);
}
2% {
transform: translate(-6px, -8px) rotate(2.5deg);
}
4% {
transform: translate(3px, -9px) rotate(-0.5deg);
}
6% {
transform: translate(3px, -8px) rotate(2.5deg);
}
8% {
transform: translate(0px, 5px) rotate(0.5deg);
}
10% {
transform: translate(3px, 2px) rotate(0.5deg);
}
12% {
transform: translate(8px, 0px) rotate(0.5deg);
}
14% {
transform: translate(4px, 7px) rotate(-3.5deg);
}
16% {
transform: translate(-4px, 0px) rotate(-0.5deg);
}
18% {
transform: translate(1px, 3px) rotate(-1.5deg);
}
20% {
transform: translate(-8px, -1px) rotate(-3.5deg);
}
22% {
transform: translate(5px, 9px) rotate(2.5deg);
}
24% {
transform: translate(-9px, -10px) rotate(-2.5deg);
}
26% {
transform: translate(0px, 7px) rotate(-1.5deg);
}
28% {
transform: translate(-10px, 7px) rotate(2.5deg);
}
30% {
transform: translate(8px, -7px) rotate(-1.5deg);
}
32% {
transform: translate(0px, -8px) rotate(-0.5deg);
}
34% {
transform: translate(9px, 7px) rotate(-0.5deg);
}
36% {
transform: translate(-7px, 6px) rotate(0.5deg);
}
38% {
transform: translate(8px, -10px) rotate(-0.5deg);
}
40% {
transform: translate(8px, 0px) rotate(0.5deg);
}
42% {
transform: translate(0px, -2px) rotate(1.5deg);
}
44% {
transform: translate(5px, -2px) rotate(-0.5deg);
}
46% {
transform: translate(1px, -10px) rotate(-2.5deg);
}
48% {
transform: translate(4px, -1px) rotate(2.5deg);
}
50% {
transform: translate(-5px, -4px) rotate(2.5deg);
}
52% {
transform: translate(3px, 2px) rotate(-3.5deg);
}
54% {
transform: translate(1px, -6px) rotate(-0.5deg);
}
56% {
transform: translate(-3px, -4px) rotate(-0.5deg);
}
58% {
transform: translate(-10px, -10px) rotate(2.5deg);
}
60% {
transform: translate(8px, 7px) rotate(-3.5deg);
}
62% {
transform: translate(9px, -6px) rotate(-3.5deg);
}
64% {
transform: translate(-5px, 8px) rotate(-0.5deg);
}
66% {
transform: translate(1px, -3px) rotate(0.5deg);
}
68% {
transform: translate(-6px, 9px) rotate(1.5deg);
}
70% {
transform: translate(-5px, 8px) rotate(-1.5deg);
}
72% {
transform: translate(-10px, -2px) rotate(2.5deg);
}
74% {
transform: translate(0px, -4px) rotate(1.5deg);
}
76% {
transform: translate(-2px, -5px) rotate(0.5deg);
}
78% {
transform: translate(-2px, 9px) rotate(-3.5deg);
}
80% {
transform: translate(7px, 4px) rotate(-3.5deg);
}
82% {
transform: translate(-1px, -4px) rotate(-1.5deg);
}
84% {
transform: translate(3px, -6px) rotate(0.5deg);
}
86% {
transform: translate(7px, -8px) rotate(-1.5deg);
}
88% {
transform: translate(4px, -9px) rotate(1.5deg);
}
90% {
transform: translate(1px, -6px) rotate(2.5deg);
}
92% {
transform: translate(-8px, -1px) rotate(-1.5deg);
}
94% {
transform: translate(-4px, -1px) rotate(0.5deg);
}
96% {
transform: translate(-6px, 9px) rotate(1.5deg);
}
98% {
transform: translate(7px, 4px) rotate(-0.5deg);
}
}
快点开我！
展示：
纯css抖动效果的更多相关文章
- CSS Shake – 摇摆摇摆！动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
- 纯CSS滑动效果
原文地址:Pure CSS Slide Up and Slide Down 示例地址:Pure CSS Slide Demo 原文日期: 2013年08月26日 翻译日期: 2013年08月27日 如 ...
- 纯CSS手风琴效果
CSS手风琴效果 主体代码如下: ...
- 发光加载环动画-纯CSS动画效果-如何创建CSS3旋转预加载器（参照https://www.bilibili.com/video/BV1V4411C7z5?from=search&seid=9741275927942612817）
//css部分 body{ margin:; padding:; background: #262626; } .ring{ position: absolute; top:50%; left: 50 ...
- 纯CSS气泡效果
http://www.liaoxuefeng.com/article/0013738937970388b6b6e5e5e2f4e21b65b01807c84ddf6000
- 纯css提示效果 提示层
<!DOCTYPE HTML PUBLIC "-//W3C//DTD xHTML 1.0 Transitional//EN"><HTML> <HEAD ...
- 利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...
- 纯CSS完成tab实现5种不同切换对应内容效果
很常用的一款特效纯CSS完成tab实现5种不同切换对应内容效果 实例预览 下载地址 实例代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 ...
- 利用target的特性，可以实现纯css的tab效果切换
基础知识: :target起作用的是href连接到的位置 如 <a href="#tab1">tab1</a> <div id="tab1& ...
随机推荐
- STL详解
STL概貌 ...
- 移动端IM开发者必读(二)：史上最全移动弱网络优化方法总结
1.前言 本文接上篇<移动端IM开发者必读(一):通俗易懂,理解移动网络的“弱”和“慢”>,关于移动网络的主要特性,在上篇中已进行过详细地阐述,本文将针对上篇中提到的特性,结合我们的实践经 ...
- MyEclipse + Maven开发Web工程的详细配置过程
好久没做Web方面的开发,今天突然想弄弄SpringMVC,因为不久前又学了点Maven觉得非常好,所以在弄SpringMVC这个Web框架时想使用Maven来做,但是问题又来了,我一直是在Eclip ...
- 使用cygwin中的awk工具进行mysql binlog日志查看[利刃篇]
linux工具确实强悍,然而作为没有linux机器使用权以及开发没有使用linux进行的人,有时想用一些命令确实不方便,所以,才去试着用用cygwin,一款在windows平台上运行的类UNIX模拟环 ...
- ElasticSearch权威指南学习（排序）
排序方式 相关性排序 默认情况下,结果集会按照相关性进行排序 -- 相关性越高,排名越靠前. 相关性分值会用_score字段来给出一个浮点型的数值,所以默认情况下,结果集以_score进行倒序排列. ...
- python编译生成的.pyc作用
如果 Python 进程在机器上拥有写入权限,那么它将把程序的字节码保存为一个以 .pyc 为扩展名的文件( ".pyc" 就是编译过的 ".py" 源代码). ...
- linux下应用程序性能剖分神器gprofiler-tools－安装和使用
最近在摆弄算法的的优化,需要剖分一下算法的瓶颈,就找了一些代码剖分工具,其中 gprofileer-tools是很不错的工具,gperftools时google开源的一款C++性能分析分析工具,git ...
- 【LeetCode】9. 回文数
题目 判断一个整数是否是回文数.回文数是指正序(从左向右)和倒序(从右向左)读都是一样的整数. 示例 1:输入: 121 输出: true 示例 2:输入: -121 输出: false 解释: 从左 ...
- Adam
Adam 方法 Adam 方法将惯性保持和环境感知这两个优点集于一身.一方面, Adam 记录梯度的一阶矩(first moment),即过往梯度与当前梯度的平均,这体现了惯性保持:另一方面,Adam ...
- C语言第十讲,枚举类型简单说明
C语言第十讲,枚举类型简单说明 一丶C语言中的枚举类型(ENUM) 在我们实际工作中,或者编写代码中.我们有的时候会用固定的值.而且不是很多. 这个时候就可以使用枚举了.如果我们使用#define显然 ...