让你的网页骚动起来

今天是圣诞节，虽然我们不是西方人，但是节日气氛浓厚呀~

所以，先祝大家圣诞节快乐~

因为今天特殊，一直想着，分享点什么好，所以找呀找，看呀看，看到了一个很（bi）好（jiao）玩（sao）的动画库。

所以今天分享的是一个css3动画库，它确实有点特殊，css3的动画库其实很多，用的最多的就是animate.css了，animate.css几乎包括了常见的动画类型。

而这次要分享的动画库叫csshake，是的，各种shake，各种摇摆，现在来看一下如何摇摆~

源文件Github地址：

https://github.com/elrumordelaluz/csshake

下面通过demo来看如何使用：

基础代码：

*{

margin: 0;

padding: 0;

list-style: none;

}

body{

text-align: center;

overflow-x: hidden;

background: url(img/beijing.png) no-repeat center bottom;

background-size: cover;

}

p{

font-size: 30px;

color: blue;

margin: 20px 0;

display: inline-block;

}

.wrap{

width: 320px;

margin: 50px auto;

background: #fff;

box-shadow: 0 0 5px rgba(0,0,0,0.2);

}

.list{

overflow: hidden;

}

li{

float: left;

margin: 20px 10px;

}

.ziti{

position: absolute;

left: 200px;

top: 150px;

}

只为高薪就业！

得到如下效果：

使用方法：

2、在需要发生动画的元素添加相应的类名即可；

基础动画有：shake,添加后，鼠标移上即有动画；

效果：

效果：

效果：

效果：

效果：

除此之外，也可以制作出持续摇摆的效果，鼠标移上停止，也是通过添加类名来设置：

shake-constant 持续动画效果；

shake-constant--hover 鼠标移上暂停动画；

只为高薪就业！

效果：

总结：

这个csshake动画库实现的原理，其实很简单，就是animation和@keyframes,所以在使用的时候也可以单独将其中的效果代码拷贝出来进行定制使用。