纯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& ...
随机推荐
- HSmartWindowControl 之 显示图像
概述:使用Halcon在VS中的控件显示一张图片. 要点:使用了图像缩放和图像显示函数,以及鼠标滚轮响应函数. 1.创建WinForm项目 首先在VS中添加Halcon所需的控件HSmartWindo ...
- 夜谈Java类的定义
女孩:谈Java了,好耶? 男孩:夜谈一下,Java的类的定义~ 女孩:那谈Java的类的什么呢? 男孩:类的定义,对象的定义,类中的方法,构造方法,this关键字,方法的重载,Java中的类的访问权 ...
- I2C和I2S的区别和使用方法
I2C(Inter-Integrated Circuit)总线是由PHILIPS公司开发的两线式串行总线,用于连接微控制器及其外围设备.是微电子通信控制领域广泛采用的一种总线标准.它是同步通信的一种特 ...
- Python - Windows系统下安装使用virtualenv
1 - virtualenv https://pypi.python.org/pypi/virtualenv/ https://github.com/pypa/virtualenv 在实际开发测试中, ...
- Linux - 快速进入目录的方法
cd命令技巧 直接进入用户的home目录: cd ~ 进入上一个目录: cd - 进入当前目录的上一层目录: cd .. 进入当前目录的上两层目录: cd ../.. 其他常用方法 利用tab键,自动 ...
- 机器学习技法笔记：12 Neural Network
Roadmap Motivation Neural Network Hypothesis Neural Network Learning Optimization and Regularization ...
- LeetCode：146_LRU cache | LRU缓存设计 | Hard
题目:LRU cache Design and implement a data structure for Least Recently Used (LRU) cache. It should su ...
- AlarmManager的使用和七牛云android SDK上传图片
一学期的课程设计又开始了,虽然以后不搞安卓,但是课设还是想好好完成的,因为之前做过地图开发,所以选了一个跟 这个相关的题目,其实有一个校车系统也可以选,但是之前做过一个相似度接近80%的东西,不想混混 ...
- vue.js多页面开发环境搭建
利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的. ...
- c++ vector的内存释放
c++中vector的一个特点是: 内存空间只会增长,不会减小.即为了支持快速的随机访问,vector容器的元素以连续方式存放,每一个元素都挨着前一个元素存储.设想,如果每次vector添加一个新元素 ...