今天隆重的推荐一个纯CSS实现的现代化具象派史诗级大作。
CSShake.一款能让你的网页元素舞动起来的神奇样式表。
样例Demo
说的再多不如来张图片给力，下面我强烈建议看到这篇文章的童鞋看看下面的这个网站csshake展示页面
怎么用
CSShake使用起来也是很简单的，我们既可以将源码下载下来，将这些样式文件添加到我们要进行添加样式的网页。也可以使用CDN的方式。
虽然使用CDN会很方便，不用管理那么多的路径及配置，但是由于需要访问外网，所以速度上可能稍有下降。这个看自己的需求吧。由于是演示，所以我这里使用CDN的方式。
引用样式文件
我们只需要在HEAD标签中添加下面的link标签
<!-- To include only some csshake animations use this syntax -->
<link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">应用样式文件
应用起来也是相当的简单，比如我们想把震动效果赋给一个DIV，就可以采用下面的方式。
<div class="shake"></div>
<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 the animation at that point when :hover -->
<div class="shake shake-freeze"></div>
<!-- Continuous animation instead on :hover -->
<div class="shake shake-constant"></div>
<!-- and stop when :hover -->
<div class="shake shake-constant shake-constant--hover"></div>当然了，定制自己的需求也是很方便的。如下：
.my-custom-shake {
@include do-shake(
$name: 'my-custom-shake',
$h: 5px,
$v: 5px,
$r: 3deg,
$dur: 100ms,
$precision: .02,
$opacity: false,
$q: infinite,
$t: ease-in-out,
$delay: null,
$chunk: 100%);
}$name {String} is the name for the keyframes animation
$h{Number} is the max number for random to assign in x axis
$v{Number} is the max number for random to assign in y axis
$r{Number} is the max number for random rotation
$dur {Number} is the animation-duration time value
$precision {Number} is the precision of the keyframes animation. For example .02 generates keyframes each 2% and .1 each 10%. The calculation is$step: 100 * $precision;
$opacity{Boolean} to apply random animation also in the opacity property
$q {String} is the animation-iteration-countvalue
$t{String} animation-timing-function value
$delay {Number} animation-delay time value
$chunk{Number} is the part of the keyframes where apply the animation
小例子
下面我们来看一个小例子吧。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- To include only some csshake animations use this syntax -->
<link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">
<title>CSS Shake Demo</title>
</head>
<body>
<!-- To shake constant -->
<div class="shake-slow shake-constant">
<img src="http://imglf.nosdn.127.net/img/aDh5T0FJOFdnWmRhNFpBMW83bGRLSWp4K1NWUXR3ZFlvcVVja2JoUmdZTkg0SEtaMGxIOThRPT0.jpg" width="200">
<br></div>
<!-- and stops on :hover -->
<div class="shake-slow shake-constant shake-constant--hover">
<img src="http://imglf2.nosdn.127.net/img/RWxQT0dreUkwQXRQdzJOVU5nZG82THZjeG5TOVFmZHd1UGtOYnc4WVY4WHp6dUw1TlJXSjV3PT0.jpg" width="200">
<br></div>
<!-- Freeze animation at that point when :hover -->
<div class="shake-crazy shake-freeze shake-slow">
<img src="http://imglf2.nosdn.127.net/img/WDRSLzY1VHdzRGUyNzdZc1F0WFZWSTB0L1BEd2tkKzZJR3B3ZVUyYS9sNFRmVDNDcTB5UGRRPT0.jpg" width="200">
<br></div>
<span class="shake-slow">我是带有震动效果的文字！</span>
<br>
<ul class="shake-trigger shake">
<li class="shake-slow">列表一</li><br>
<li class="shake-chunk">列表二</li><br>
<li>列表三</li><br>
<li class="shake-hard">列表四</li><br>
<li>列表五</li><br>
<li class="shake">列表⑥</li><br>
</ul>
</body>
</html>还在等什么，赶紧给你的网页加上点现代元素吧。
