1.首先引入 animate.css(引入动画css)
示例:
<p class="wow bounceInRight" data-wow-duration="0.5" data-wow-delay="1s" data-wow-iteration=3>测试文字2</p>
2.在body尾巴引入 wow.js(引入js)
引入之后咱们给他初始化
<script type="text/javascript">
new WOW().init();
</script>
data-wow-duration:改变动画时间
data-wow-delay:延迟在动画开始之前
data-wow-offset:距离开始动画(浏览器底部)
data-wow-iteration:动画重复的次数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link href="animate.css" rel="stylesheet" media="all"> <style> h1{ color: #f35626; } p{ font-size: 30px; color: #f35626; } .dd{ background: red; 400px;height:880px;border: 11px solid red; } </style> </head> <body> <div class="dd"></div> <div class="wow lightSpeedIn"> Content to Reveal Here </div> <div class="wow bounce" >102120120</div> <div class="dd"></div> <h1>简单测试文字</h1> <p class="wow bounceInRight" data-wow-duration="2s" data-wow-delay="0.1s" >测试文字2</p> <script src="wow.min.js"></script> <script type="text/javascript"> new WOW().init(); </script> </body> </html> <!-- //asdasd 动画效果 1.这个依赖aninate.css 2.初始化WOW 记得大写 https://blog.csdn.net/weixin_40292626/article/details/80277182 -->