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
-->