标签：
前端时间做项目发现一抖动按钮挺吸引眼球的，研究了下实现原理，在此和大家分享下：
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">
给你的DOM元素添加shake class样式
<div class="shake"></div>
添加抖动样式，一共9种，也可以看DEMO对应添加即可
<div class="shake shake-hard"></div>
<div class="shake shake-slow"></div>
<div class="shake shake-little"></div>
<div class="shake shake-horizontal"></div>
<div class="shake shake.vertical"></div>
<div class="shake shake-rotate"></div>
<div class="shake shake-opacity"></div>
<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>
最后，欢迎大家指出我的不足之处哟
标签：
原文地址：http://www.cnblogs.com/Better-Me/p/4308256.html
