解析css3 shake 抖动样式_html/css_WEB-ITnose-html tutorial-php.cn

解析css3 shake 抖动样式_html/css_WEB-ITnose

WBOY

Lepaskan： 2016-06-24 11:48:54

asal

1351 orang telah melayarinya

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

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

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

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

使用教程

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

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

Salin selepas log masuk

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

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

Salin selepas log masuk

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

<div class="shake shake-hard"></div>

Salin selepas log masuk

<div class="shake shake-slow"></div>

Salin selepas log masuk

<div class="shake shake-little"></div>

Salin selepas log masuk

<div class="shake shake-horizontal"></div>

Salin selepas log masuk

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

Salin selepas log masuk

<div class="shake shake-rotate"></div>

Salin selepas log masuk

<div class="shake shake-opacity"></div>

Salin selepas log masuk

<div class="shake shake-crazy"></div>另外还能通过 .freeze, .shake-constant & .hover-stop 来控制状态，具体自己试下哦！接下来是我自己编写的一个鼠标放上停止抖动的小实验：<!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>最后，欢迎大家指出我的不足之处哟

Salin selepas log masuk