2020使用animate.css和wow.js最新教程
animate.css可以使用动画，wow.js可以让页面滚动加载动画，oppo官网首页https://www.dowebok.com/demo/131/index2.html是一个经典的例子，只需三步就可以做出类似效果。
看了官网wow.js的教程发现wow.js引入之后动画没有效果
代码是这个样子的
<li class="wow bounceInLeft">啊啊啊</li>
<li class="wow bounceInRight"></li>
<li class="wow bounceIn"></li>
<li class="wow bounceInUp"></li>
<li class="wow bounceInDown"></li>
<li class="wow slideInUp"></li>
<li class="wow slideInDown"></li>
<li class="wow slideInLeft"></li>
<li class="wow slideInRight"></li>
后来发现animate.css已经更新了，应该是在2020年初左右，以下是使用animate.css和wow.js的最新教程：
animate.css教程
- 下载animate.css文件
https://animate.style/ - 引入
cdn方式
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.min.css"/>
引入css文件
<link rel="stylesheet" href="./animate.css/animate.css">
- 添加类名
animate__animated animate__bounceInLeft
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./animate.css/animate.css">
<style>
.container {
width: 800px;
margin: 0 auto;
}
.container ul {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container ul li {
width: 300px;
height: 300px;
margin-bottom: 40px;
list-style: none;
border-radius: 50%;
text-align: center;
vertical-align: middle;
align-items: center;
line-height: 300px;
background-color: pink;
}
.container ul li:nth-child(4n) {
background-color: #409EFF;
}
.container ul li:nth-child(4n+1) {
background-color: #67C23A;
}
.container ul li:nth-child(4n+2) {
background-color: #E6A23C;
}
</style>
</head>
<body>
<section class="container">
<ul>
<li class="animate__animated animate__bounceInLeft">啊啊啊</li>
<li class="animate__animated animate__bounceInRight"></li>
<li class="animate__animated animate__bounceIn"></li>
<li class="animate__animated animate__bounceInUp"></li>
<li class="animate__animated animate__bounceInDown"></li>
<li class="animate__animated animate__slideInUp"></li>
<li class="animate__animated animate__slideInDown"></li>
<li class="animate__animated animate__slideInLeft"></li>
<li class="animate__animated animate__slideInRight"></li>
<li class="animate__animated animate__lightSpeedIn"></li>
<li class="animate__animated animate__pulse"></li>
<li class="animate__animated animate__flipInX">哦哦哦</li>
<li class="animate__animated animate__flipInY"></li>
<li class="animate__animated animate__bounce"></li>
<li class="animate__animated animate__shake"></li>
<li class="animate__animated animate__wobble"></li>
<li class="animate__animated animate__rollIn"></li>
<li class="animate__animated animate__fadeInUpBig" data-wow-delay="0.3s"></li>
<li class="animate__animated animate__fadeInUpBig" data-wow-delay="0.6s">呃呃呃</li>
<li class="animate__animated animate__fadeInUpBig" data-wow-delay="0.9s"></li>
<li class="animate__animated animate__fadeInUpBig" data-wow-delay="1.2s"></li>
<li class="animate__animated animate__animate__zoomOut" data-wow-delay="1.5s"></li>
</ul>
</section>
</body>
</html>
wow.js使用教程
- 下载animate.css和 wow.js文件
wow.js官网：https://www.delac.io/wow/docs.html - 引入，要对WOW()进行初始化
<script src="./wowjs/dist/wow.js"></script>
<script>
new WOW().init();
</script>
- 添加类名wow 和animate的类名，因为wow是依赖于animate.css文件的
wow animate__animated animate__bounceInLeft - 案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./animate.css/animate.css">
<style>
.container {
width: 800px;
margin: 0 auto;
}
.container ul {
display: flex;
display: -webkit-flex;
justify-content: space-between;
flex-wrap: wrap;
}
.container ul li {
width: 300px;
height: 300px;
margin-bottom: 40px;
list-style: none;
border-radius: 50%;
text-align: center;
vertical-align: middle;
align-items: center;
line-height: 300px;
background-color: pink;
}
.container ul li:nth-child(4n) {
background-color: #409EFF;
}
.container ul li:nth-child(4n+1) {
background-color: #67C23A;
}
.container ul li:nth-child(4n+2) {
background-color: #E6A23C;
}
</style>
</head>
<body>
<section class="container">
<ul>
<li class="wow animate__animated animate__bounceInLeft">啊啊啊</li>
<li class="wow animate__animated animate__bounceInRight"></li>
<li class="wow animate__animated animate__bounceIn"></li>
<li class="wow animate__animated animate__bounceInUp"></li>
<li class="wow animate__animated animate__bounceInDown"></li>
<li class="wow animate__animated animate__slideInUp"></li>
<li class="wow animate__animated animate__slideInDown"></li>
<li class="wow animate__animated animate__slideInLeft"></li>
<li class="wow animate__animated animate__slideInRight"></li>
<li class="wow animate__animated animate__lightSpeedIn"></li>
<li class="wow animate__animated animate__pulse"></li>
<li class="wow animate__animated animate__flipInX">哦哦哦</li>
<li class="wow animate__animated animate__flipInY"></li>
<li class="wow animate__animated animate__bounce"></li>
<li class="wow animate__animated animate__shake"></li>
<li class="wow animate__animated animate__wobble"></li>
<li class="wow animate__animated animate__rollIn"></li>
<li class="wow animate__animated animate__fadeInUpBig" data-wow-delay="0.3s"></li>
<li class="wow animate__animated animate__fadeInUpBig" data-wow-delay="0.6s">呃呃呃</li>
<li class="wow animate__animated animate__fadeInUpBig" data-wow-delay="0.9s"></li>
<li class="wow animate__animated animate__fadeInUpBig" data-wow-delay="1.2s"></li>
<li class="wow animate__animated animate__animate__zoomOut" data-wow-delay="1.5s"></li>
</ul>
</section>
<script src="./wowjs/dist/wow.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>