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)
}
}

3. shake 源码包

css3 抖动的更多相关文章

  1. 炫酷的CSS3抖动样式:CSS Shake

    CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...

  2. Css3抖动

    http://files.cnblogs.com/xinlinux/csshake.min.css <div class="shake">AAA</div> ...

  3. 如何用css3实现一个图片的抖动或者弹跳

    <li onmouseout="this.className='off'"><a href=""><img src=". ...

  4. css3 序列帧动画抖动

    页面需要一个动画,设计师给了动画的序列帧 项目由vue构建,使用css3做动画 html <div class="work_two_main"></div> ...

  5. 解析css3 shake 抖动样式

    前端时间做项目发现一抖动按钮挺吸引眼球的,研究了下实现原理,在此和大家分享下: CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的 ...

  6. CSS3 transform rotate(旋转)锯齿/元素抖动模糊的解决办法

    使用CSS3 3D transforms,通过GPU来渲染,能有效的起到抗锯齿效果.只要在CSS3 transform属性中加入translateZ(0).例:-webkit-transform: r ...

  7. CSS3动画之按钮抖动

    今天要分享一组代码,当鼠标悬停在按钮上时.按钮抖动!!! <!DOCTYPE html> <html lang="en"> <head> < ...

  8. css3 @keyframe 抖动/变色动画

    一.纯css实现 .shake{    //抖动的元素    width: 200px;    height: 100px;    margin: 50px auto;    background: ...

  9. css3鼠标悬停图片抖动效果

    提供一个参考的链接 http://demo.lanrenzhijia.com/2015/pic0113/

随机推荐

  1. 科普HTTP Slow Attack 和 Apache DOS 漏洞的修复

    导读 HTTP 的 Slow Attack 有着悠久历史的 HTTP DOS 攻击方式,最早大约追溯到 5 年前,按理说早该修复了,但是 Apache 的默认配置中仍然没有添加相关配置,或者他们认为这 ...

  2. yii 表单如何写,action指向哪里?

    文本框:textInput(); 密码框:passwordInput(); 单选框:radio(),radioList(); 复选框:checkbox(),checkboxList(); 下拉框:dr ...

  3. C++中的.和::和:和->的区别

    在学习C++的过程中我们经常会用到.和::和:和->,在此整理一下这些常用符号的区别. 1.A.B则A为对象或者结构体: 2.A->B则A为指针,->是成员提取,A->B是提取 ...

  4. Andrew Ng机器学习公开课笔记 -- Generalized Linear Models

    网易公开课,第4课 notes,http://cs229.stanford.edu/notes/cs229-notes1.pdf 前面介绍一个线性回归问题,符合高斯分布 一个分类问题,logstic回 ...

  5. python __init__ 构造函数

    实例化过程 会执行__init__ 的函数方法 class SQLHelper: def __init__(self): # self = s1 print("helo") def ...

  6. Windows mysql默认字符集修改

    一.通过MySQL命令行修改: set character_set_client=utf8; set character_set_connection=utf8; set character_set_ ...

  7. STL学习笔记--算法

    关于STL算法需要注意的是: (1) 所有STL算法被设计用来处理一个或多个迭代器区间.第一个区间通常以起点和终点表示,至于其他区间,多数情况下只需提供起点即可,其终点可自动以第一区间的元素数推导出来 ...

  8. Java用数据结构解决实现问题之数学问题

    有趣的整数: 完数:如果一个数字恰好等于他的因子之和,就叫做完数,需求是求出10000以内的所有的完数. 解法:1.用n去除以1-n之间的所有的整数,将能整除的被除数保存到一个数组中,作为n的一个因子 ...

  9. 一个很大的文件,存放了10G个整数的乱序数列,如何用程序找出中位数。

    一.梳理审题 一.看清题目: 注意这个题目的量词,这个文件中有10G个整数,而不是这个文件占了10G的内存空间. 二.一些疑问: 在计算机中我们讲的G.M等都是存储容量的概念,但是一般都会在会面加上B ...

  10. ng-深度学习-课程笔记-9: 机器学习策略1(Week1)

    1 为什么要应用机器学习策略( Why is machine learning strategy ) 当你想优化一个问题的时候,通常可以有很多尝试(比如收集更多数据,增加迭代次数,改用adam,改变网 ...