效果演示

所谓的摇晃特效，就是当你把光标移到文字上的时候……我可以轻微的晃，慢慢的晃，猛烈晃，疯狂晃，甚至左右晃，上下晃，旋转着，闪烁着 ……

前段时间在家没事做，突然想到之前看到的CSS特效，觉得文字摇晃很好玩。google了一下，原来是一个开源的css包。心血来潮，便想做个网页试一下。

下面是css shake的用法介绍，整理翻译自github页面的介绍：
首先在html里声明包含css文件，最简单的方法是通过CDN加载（你也可以将https://csshake.surge.sh/csshake.min.css下载到本地然后加载）：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/csshake/1.5.3/csshake.min.css" />

然后通过添加class来使用不同的效果：

<div class="shake">Foo</div> 
<div class="shake shake-hard">Bar</div> 
<div class="shake shake-slow">Baz</div> 
<div class="shake shake-little">Qux</div> 
<div class="shake shake-horizontal">Egg</div> 
<div class="shake shake-vertical">Ham</div> 
<div class="shake shake-rotate">Snake</div> 
<div class="shake shake-opacity">Apple</div> 
<div class="shake shake-crazy">Orange</div>

还可以通过增加class来控制动画的状态（比如一直摇晃，还是光标放上去摇晃）

<!-- Freeze the animation at that point when :hover --> 
<div class="shake shake-freeze">Hello</div> 
<!-- Continuous animation instead on :hover --> 
<div class="shake shake-constant">Hola</div> 
<!-- and stop when :hover --> 
<div class="shake shake-constant shake-constant-hover">Halo</div>

另外，还可以自定义摇晃类型，具体的用法请参考 https://elrumordelaluz.github.io/csshake/