csshake强大的CSS3元素抖动动画库-爱编程

csshake强大的CSS3元素抖动动画库

来源：htmleaf 阅读：7 时间：2018-02-04 01:29

csshake是一款功能强大的CSS3元素抖动动画库。csshake可以使DOM元素抖动起来。该抖动动画库中共有10种不同的抖动效果。

使用方法

要使用csshake，首先要将csshake.css文件引入你的html文件的<head>中。

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

然后你就可以使用下面的方法是DOM元素抖动起来：

<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 、 .shake-constant 和 .hover-stop 来控制抖动动画的状态。

定制

你可以通过SASS @mixins 来创建新的抖动动画。

编辑_mixins.scss文件：

@include shake($x, $y, $rot, $name, $steps, $opacity);

$x 和 $y 是在x或y轴上移动的像素。
$rot 是旋转的角度。
$name 是参数中元素的名字。
$steps 可以调整动画的循环次数（例如：设置为10可以是动画每次完成10%）。
$opacity 表示是否给动画添加透明度。

下面是一个例子：

@include shake(40px, 40px, 20deg, 'shake-crazy', 10, true);

编辑_shake.scss文件：

@include animation($name, $dur, $iter, $tim, $del);

$name ：animation-name。
$dur ：animation-duration。
$iter ：animation-iteration-count。
$tim ：animation-timing-function。
$del ：animation-delay。

下面是一个例子：

@include animation(shake-slow, 5s);

注意：你必须使用random()函数来编译SASS文件。

你可以在下面三篇文章中获得更多这方面的信息：

更多关于csshake的资料请参考：https://github.com/daneden/animate.css

在线预览源码下载