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/
随机推荐
- Swift - 获取状态栏一些信息
// 获取状态栏的各种信息 :网络类型,运营商,电池电量,显示的系统时间等信息 import UIKit enum NetWorkType { case NetworkStatesNone // 没有 ...
- Java定时器和Quartz使用
一.Java普通自定义定时器 /** * 自定义一个定时器 * @author lw */ public class MyTimer extends Thread{ private Long time ...
- [NGINX] - 配置文件优化 - NGINX.CONF
Nginx 本文主要针对公司的Nginx负载均衡配置进行解释,配置文件在最下方.因为公司没有使用PHP,所以NGINX里面并没有太多facgi模块相关优化 NGINX.CONF user 语 ...
- Oracle命令（三）：Oracle用户
1.显示当前用户名 select user from dual; show user 2.显示当然用户有哪些表 select * from tab; 3.显示当所有用户的表 select * from ...
- php中的魔术方法(Magic methods)和魔术常亮
PHP中把以两个下划线__开头的方法称为魔术方法,这些方法在PHP中充当了举足轻重的作用. 魔术方法包括: __construct(),类的构造函数 __destruct(),类的析构函数 __cal ...
- Shell--基础知识
变量的定义: a=1 b=hello c="hello world !" d='hello "反启" !' e=`ls` (注意:这是反引号) 备注:=号左右 ...
- Kafka Producer接口
参考, https://cwiki.apache.org/confluence/display/KAFKA/0.8.0+Producer+Example http://kafka.apache.org ...
- Idea的注入和自动编译配置
实时编译: 第二个(防止编译时Autowired报错): 修改成:
- 第1章 1.6计算机网络概述--OSI参考模型
ISO七层模式:国际标准组织对互联网通信规则进行的定义. 7.应用层:所有能产生网络流量的程序,如:QQ. 6.表示层:传输前对数据进行进行处理,是一种数据处理的规则,如:加密.压缩.传输二进制(图片 ...
- matplotlib-曲线和折线案例
matplotlib-曲线和折线案例 import matplotlib.pyplot as plt import numpy as np x = np.linspace(-5, 5, 100) pr ...