前端时间做项目发现一抖动按钮挺吸引眼球的，研究了下实现原理，在此和大家分享下：

CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。

其中有前辈为大家编写好了csshake.css ，大家可以去参考下：http://www.webhek.com/misc/css-shake

Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，下面一起来看看介绍：

使用教程

首先引入css shake的样式表文件。

  1. <link type="text/css" href="csshake.css">

给你的DOM元素添加shake class样式

  1. <div class="shake"></div>

添加抖动样式，一共9种，也可以看DEMO对应添加即可

  1. <div class="shake shake-hard"></div>
  1. <div class="shake shake-slow"></div>
  1. <div class="shake shake-little"></div>
  1. <div class="shake shake-horizontal"></div>
  1. <div class="shake shake.vertical"></div>
  1. <div class="shake shake-rotate"></div>
  1. <div class="shake shake-opacity"></div>
  1. <div class="shake shake-crazy"></div>
  2.  
  3. 另外还能通过 .freeze, .shake-constant & .hover-stop 来控制状态，具体自己试下哦！
  4.  
  5. 接下来是我自己编写的一个鼠标放上停止抖动的小实验：
    <!doctype html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>shake study</title>
            <style type="text/css">
            .box{width: 200px;height: 100px;background-color: #ccc;margin:30px auto;}
            .shake{
                -webkit-animation-name: shake_box;
                -ms-animation-name: shake_box;
                animation-name: shake_box;
                -webkit-animation-duration: 100ms;
                -ms-animation-duration: 100ms;
                animation-duration: 100ms;
                -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:hover{
                -webkit-animation-iteration-count: infinite;
                -ms-animation-iteration-count: infinite;
                animation-iteration-count: infinite;
                /*-webkit-animation-play-state: paused;
                -ms-animation-play-state: paused;
                animation-play-state: paused;*/
            }
            @keyframes shake_box{
                0% {transform: translate(0px, 0px) rotate(0deg)}
                20% {transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
                40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
            }
            @-ms-keyframes shake_box{
                0% {-ms-transform: translate(0px, 0px) rotate(0deg)}
                20% {-ms-transform: translate(1.5px, -2.5px) rotate(-1.5deg)}
                40% {transform: translate(-2.5px, 0.5px) rotate(-0.5deg)}
            }
            </style>
        </head>
        <body>
            <div class="box shake"></div>
        </body>
    </html>
  6.  
  7. 最后，欢迎大家指出我的不足之处哟

解析css3 shake 抖动样式的更多相关文章

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

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

  2. CSS3自定义滚动条样式

    原文地址:→传送门 写在前面 滚动条是个很常见的东东,不过某些浏览器自带的滚动条确实不太好看啊,下面可以作为学习,探讨下自定义滚动条的实现,这样你的滚动条就可以美美的啦.但是,也只能玩玩,因为只针对w ...

  3. css3美化滚动条样式

    1.改变浏览器默认的滚动条样式 ::-webkit-scrollbar-track-piece { //滚动条凹槽的颜色,还可以设置边框属性 background-color:#f8f8f8; } : ...

  4. 解决CSS3多列样式column-width布局时内容被截断、错乱

    一.问题 使用CSS3的column-width: auto | <length>属性时,出现排列的内容被截断,出现错位的现象. 二.原因 需要为图片容器设置高度,不然会崩掉. 三.解决方 ...

  5. css盒子模型 css3盒子相关样式

    1.内边距(内边距在content外,边框内) 内边距属性: padding          设置所有边距 padding-bottom     底边距 padding-left           ...

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

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

  7. CSS3：scrollbar样式设置

    CSS3:scrollbar样式设置 1. 设置出现滚动条的方式 overflow:scroll --- x和y方向都会出现滚动条 或者 overflow-x:scroll --- 只有x方向出现滚动 ...

  8. 从0搭建vue3组件库:Shake抖动组件

    先看下效果 其实就是个抖动效果组件,实现起来也非常简单.之所以做这样一个组件是为了后面写Form表单的时候会用到它做一个规则校验,比如下面一个简单的登录页面,当点击登录会提示用户哪个信息没输入,当然这 ...

  9. 从浏览器渲染层面解析css3动效优化原理

    引言 在h5开发中,我们经常会需要实现一些动效来让页面视觉效果更好,谈及动效便不可避免地会想到动效性能优化这个话题: 减少页面DOM操作,可以使用CSS实现的动效不多出一行js代码 使用绝对定位脱离让 ...

随机推荐

  1. PC 端响应式布局

    前言:PC端 电脑显示器的尺寸种类还是很多的,台式电脑和笔记本电脑尺寸相差就更明显,所以响应式布局还是很重要的,甚至是必须要考虑的. 响应式的页面好不好,在后管平台上很明显.因为后管平台,一般是全屏显 ...

  2. [ZJOI2011]看电影(组合数学/打表+高精)

    Description 到了难得的假期,小白班上组织大家去看电影.但由于假期里看电影的人太多,很难做到让全班看上同一场电影,最后大家在一个偏僻的小胡同里找到了一家电影院.但这家电影院分配座位的方式很特 ...

  3. struct and union example

    1. StructHandler.c: /* * StructHandler.c * *  Created on: Jul 6, 2013 *      Author: wangle */#inclu ...

  4. web项目中实现页面跳转的两种方式

    <a href="javascript:"></a>跳转在网页本身,URL不改变 <a href="#"></a> ...

  5. HTML中列表中元素居中问题

    想让列表<table>中某一行元素居中的话,单纯使用<align  = 'center'>是达不到效果的,需要先将该行进行合并,使用colspan属性. <html> ...

  6. javascript 学习犯错记录

    看w3c学习js,有时按自己想法来,会出一些莫名奇妙的错误,而这些问题百度到了,但因为学习原因基础不捞,导致看到了答案,却认为这不是答案 1.一个很简单的 一个html,一个js文件 我想在js中的b ...

  7. STL 队列模板实现

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/u010016150/article/details/32715801   C++ Prime确实有点 ...

  8. OpenResty实现限流的几种方式

      在开发 api 网关的时,做过一些简单的限流,比如说静态拦截和动态拦截:静态拦截说白了就是限流某一个接口在一定时间窗口的请求数.用户可以在系统上给他们的接口配置一个每秒最大调用量,如果超过这个限制 ...

  9. keras 或 tensorflow 调用GPU报错：Blas GEMM launch failed

    GPU版的tensorflow在模型训练时遇到Blas GEMM launch failed错误,或者keras遇到相同错误(keras 一般将tensorflow作为backend,如果安装了GPU ...

  10. 建站租用RAKsmart服务器的优势

    RAKsmart算是近年来受国内用户关注度颇高的美国服务器提供商.位于美国西海岸加州地区的RAKsmart机房,拥有超过十年的机房管理经验,提供了快速.稳定的服务器租用服务.那么RAKsmart服务器 ...