Animate.css动画库搭配WOW.js 实现页面动画效果（五毛钱特效网站）

本文链接：https://blog.csdn.net/weixin_44409748/article/details/130950755

1.简介

有的页面在向下滚动的时候，有些元素会产生细小的动画效果。比如需要做到滚动条滑到某个位置时，才能显示动画。wow.js 依赖 animate.css，所以它支持 animate.css 多达 60 多种的动画效果，能满足您的各种需求。

Animate官网：Animate中文网 – Animate安装、Animate使用、Animate下载

Animate下载地址：animate.css (v4.1.1) - animate.css 包含了一组炫酷、有趣、跨浏览器的动画，可以在你的项目中直接使用。 | BootCDN - Bootstrap 中文网开源项目免费 CDN 加速服务

WoW.js下载地址：WOW.js download | SourceForge.net

案例如下： wow.js需要声明一下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>animate</title>
    <link rel="stylesheet" href="./css/animate.min.css">
    <script src="./js/wow.min.js"></script>
    
    <style>

        .box ul li{
            width: 200px;
            height: 200px;
            background-color: lightblue;
            margin: 10px;
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated wow fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated wow fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInDownBig">1</li>
            <li class="animated fadeInLeft">2</li>
            <li class="animated wow shake">3</li>
            <li class="animated wow tada">4</li>
            <li class="animated lightSpeedIn">5</li>
            <li class="animated wow slideInDown">6</li>
        </ul>
    </div>
</body>
<script>
    var wow = new WOW({
        boxClass: 'wow',
        animateClass: 'animated',
        offset: 0,
        mobile: true,
        live: true
    });
    wow.init();
    </script>
    
</html>