<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="css/animate.css"/> <style type="text/css"> .div1{ width: 300px; height: 300px; background: skyblue; margin: 10 auto; } </style> </head> <body> <div class="div1 wow bounceIn"> </div> <div class="div1 wow bounceIn"> </div> <div class="div1 wow bounceIn"> </div> <div class="div1 wow bounceIn"> </div> <div class="div1 wow bounceIn"> </div> <div class="div1 wow bounceIn"> </div> <div class="div1 wow bounceIn"> </div> <div class="div1 wow bounceIn"> </div> <!-- 持续时间/延迟时间/偏移值/迭代次数 --> <div class="div1 wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div> <div class="div1 wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div> <script src="js/wow.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var obj = { boxClass: 'wow', animateClass: 'animated', offset: 0, mobile: true, live: true } new WOW(obj).init(); //属性/方法 类型 默认值 说明 //boxClass 字符串 ‘wow’ ‘wow’需要执行动画的元素的 class //animateClass 字符串 ‘animated’ ‘animated’animation.css 动画的 class //offset 整数 0 距离可视区域多少开始执行动画 //mobile 布尔值 true 是否在移动设备上执行动画 //live 布尔值 true 异步加载的内容是否有效 </script> </body> </html>