css实现快速抖动效果_CSShake 使用 CSS3 实现各种抖动效果 - 文章

CSShake 是一个使用 CSS3 实现的动画样式，使用 SASS 编写，利用它我们可以实现多种不同样式的抖动效果。

CSShake 是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。这个csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动。

安装方法

$ git clone https://github.com/elrumordelaluz/csshake.git

$ bower install csshake

$ npm i csshake

以上方法，任选其一即可。

使用方法

包括 CSS 文件，然后将类应用于元素

要只包含一些csshake动画，请使用以下语法：

摇动常数

在以下时间冻结动画，直到鼠标悬停。

更多效果

你可以根据自己的需要，添加自己的效果：

.my-custom-shake {

@include do-shake(

$name: 'my-custom-shake', /* {String} is the name for the keyframes animation */

$h: 5px, /* {Number} is the max number for random to assign in x axis */

$v: 5px, /* {Number} is the max number for random to assign in y axis */

$r: 3deg, /* {Number} is the max number for random rotation */

$dur: 100ms, /* {Number} is the animation-duration time value */

$precision: .02, /* {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: false,

$q: infinite, /* {String} is the animation-iteration-count value */

$t: ease-in-out, /* {String} animation-timing-function value */

$delay: null, /* {Number} animation-delay time value */

$chunk: 100% /* {Number} is the part of the keyframes where apply the animation */

);

}

/* Example shake-crazy */

.shake-crazy {

@include do-shake('shake-crazy', 40, 40, 20, 100ms, .1, $opacity: true);

}