Animate.css_动画插件

下载插件：animate下载

1. 页面引入插件

在你的index.html页面中引入这两个文件

<link rel="stylesheet" href="lib/animate/animate.css">
<script src="lib/animate/wow.min.js"></script>
 
 
1
2

2.写js代码

在js中写下面这句：

$(function(){
 //动画效果         
  new WOW().init();
});
 
 
1
2
3
4

3. 在html页面中添加动画

在index.html页面中找到需要添加动画效果的对象。如果是一大块内容，就直接找最靠近它并且包围它的大盒子，给盒子添加类：class="wow 动画效果"，具体参考下面代码：

bounce是动画效果，根据自己需要添加效果，参考：animate.css各种动画效果

<nav class="wow bounce"></nav>
你也可以添加一个或几个属性如下：
<nav class="wow bounce" data-wow-duration="2s" data-wow-delay="5s" data-wow-offset="10" data-wow-iteration="10"></nav>
 
 
1
2
3

属性： 
data-wow-duration=”2s” 即：动画用2秒钟执行完。 
data-wow-delay=”5s” 即：动画延迟5秒执行。 
data-wow-offset=”10” 即： 距离可视区多远开始执行动画。 
data-wow-iteration=”10” 即：重复次数。