CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果。比如自动抖动、鼠标悬停抖动、鼠标划过抖动。这个效果很好玩,该特效可以用到logo、图标、按钮或者标题上面,显得很是动感
如何在网页中调用呢?只需要调用CSS Shake代码及文件即可。
<
link
type
=
"text/css"
href
=
"http://elrumordelaluz.github.io/csshake/css/csshake.min.css"
>
/* 引入css shake的样式表,样式表可以下载到你的网站目录里调用哦 */
<
div
class
=
"shake"
>
<
/
div
>
/* 添加shake class样式 */
/* 添加抖动样式,一共9种,如下 */
<
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
>