CSS Shake是一个使用CSS3实现的动画样式，使用SASS编写，利用它我们可以实现多种不同样式的抖动效果（如下面的GIF图像）。这是一个很微小的动画，但使用得当也是挺不错的，比如用在广告、图像、按钮上，这样可以用来吸引用户眼球从而促使去点击它。这个Csshake有9个抖动样式，三个状态，如鼠标经过拉动、无限抖动、鼠标悬停拉动，一起来看一下吧。官网地址，git地址
安装：
三种方法：
$ git clone https://github.com/elrumordelaluz/csshake.git
$ bower install csshake
$ npm i csshake
使用：
包括CSS文件，然后将类应用于元素。
首先引入css shake的样式表文件。
<link type="text/css" href="csshake.css"> 或
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">
添加抖动样式，一共9种，也可以看DEMO对应添加即可：
<div class="shake shake-hard">
<div class="shake shake-slow">
<div class="shake shake-little">
<div class="shake shake-horizontal">
<div class="shake shake.vertical">
<div class="shake shake-rotate">
<div class="shake shake-opacity">
<div class="shake shake-crazy">
另外我还能通过.freeze,.shake-constant&.hover-stop来控制状态，具体自己试下哦！
想要更多特制的效果，可以引入下面的文件：
<!-- To include only some csshake animations use this syntax -->
<link rel="stylesheet" type="text/css" href="csshake-slow.min.css">
<!-- or from surge.sh -->
<link rel="stylesheet" type="text/css" href="http://csshake.surge.sh/csshake-slow.min.css">
<!-- To shake constant -->
<div class="shake-slow shake-constant">
<!-- and stops on :hover -->
<div class="shake-slow shake-constant shake-constant--hover">
效果如下：
CSS Shake在 SASS 预留了参数方法，可以自己修改参数获得想要的效果，具体方法如下：
.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);
}
CSShake作为React功能组件
npm i --save reshake
import React, { Component } from 'react'
import { Shake } from 'reshake'
class App extends Component {
render () {
return (
<Shake
h={53}
v={5}
r={3}
dur={300}
int={10}
max={100}
fixed={true}
fixedStop={false}
freez={false}>
</Shake>
)
}
}
更多...
为每个动画类型分离的组件 见 地址 详情
附：手摸手玩转经典图表类库 - Echarts3
手摸手带你玩转sublime text 3 安装配置
声明：部分内容从网络获取，如有侵权行为，请与作者联系，作者将于2日内删除。
