CSS库:csshake

发布时间: 2016-05-06

hackernews

Csshake是一款魔性的CSS库，可以让DOM元素shake起来。有意思的是，这个库是纯CSS实现的。类似效果的库还有一个名为jrumble，基于jQuery实现。

用法非常简单，只要为需要抖动的元素添加一个class就可以看到效果。

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

<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>

作者的实现代码不过100多行(基于SCSS)，大概原理是利用了CSS的transform，然后按百分比渐变调整元素，从而产生了动效。