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. 问答项目---账号密码异步校验后进行PHP校验

    在做登陆的时候,通过异步校验后还需要通过PHP来校验账号和密码的正确性. PHP校验账号密码: public function login(){ if(!IS_POST){echo "页面不 ...

  2. EDT改成CST

    功能说明:显示文字.语 法:echo [-ne][字符串]或 echo [--help][--version]补充说明:echo会将输入的字符串送往标准输出.输出的字符串间以空白字符隔开, 并在最后加 ...

  3. 限制ip ssh远程登录

    有时候为了服务器的安全考虑,我们可以在服务器上做限制,禁止其他ip地址连接服务器. 方法一:修改ssh配置文件 其实做这个操作很简单,只需要改/etc/ssh/sshd_config配置文件,再最后一 ...

  4. 170525、解决maven隐式依赖包版本问题

    今天在使用dubbo2.5.3版本的时候,启动项目的时候发现一个问题,tomcat启动一直报错 Caused by: java.lang.IllegalStateException: Context ...

  5. 170508、忘记jenkins密码或者修改jenkins密码

    刚配置好jenkins时,不知道密码是什么,很多同学都有这种烦恼把,各种抓狂. 操作步骤: 1.进入jenkins用户目录  cd /home/rick/.jenkins/users/admin ps ...

  6. BaseLayout

    angularjs2 knockoutjs framework7 jquerymobile bootstrap html5 css [Activity(Label = "ActivityBa ...

  7. andorid ListView和GirdView 与ScrollView 冲突

    1.listview解决方法 public static void setListViewHeightBasedOnChildren(ListView listView) { if(listView ...

  8. 最长括号化长度 java

    1:求最长括号, ()(()()( 例如,它的最长符合括号化的长度为4 package com.li.huawei; import java.util.Arrays; import java.util ...

  9. Hadoop MapReduce Task的进程模型与Spark Task的线程模型

    Hadoop的MapReduce的Map Task和Reduce Task都是进程级别的:而Spark Task则是基于线程模型的. 多进程模型和多线程模型 所谓的多进程模型和多线程模型,指的是同一个 ...

  10. vim多行注释和取消注释 Ubuntu

    多行注释: 1. 进入命令行模式,按ctrl + v进入 visual block模式,然后按d 是选择到最后一行,也可以直接光标上下左右,把需要注释的行标记起来 2. 按大写字母I,再插入注释符,例 ...