目录

一、WOW.js介绍

WOW.js 实现了在网页滚动时的动画效果，可以让你的页面更有趣，比如页面在向下滚动的时候，让一些元素产生动画效果，吸引用户的注意。
注意点：WOW.js 实现需要 Animate.css 项目的支持。
点击前往WOW.js官网

二、使用步骤

1.打开git链接下载WOW.js
2.解压文件，找到dist下的wow.min.js文件用于链接到页面中使用WOW.js
3.首先要在页面中链入Animate.css

<!-- 引入animate文件 -->
<link rel="stylesheet" href="css/animate.min.css">

4.在页面底部引入wow.min.js文件并进行初始化

<script src="../js/wow.min.js"></script>
<script>
    new WOW().init();
</script>

也可以进行自定义配置，如下所示：

var wow = new WOW({
    boxClass: ‘wow‘,
    animateClass: ‘animated‘,
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

配置的含义：

属性类型默认值说明
boxClass字符串‘wow’需要执行动画的元素的 class
animateClass字符串‘animated’animation.css 动画的 class
offset整数0距离可视区域多少开始执行动画
mobile布尔值true是否在移动设备上执行动画
live布尔值true异步加载的内容是否有效

5.为想要添加动画效果的元素（必须是块级元素或者是行内块级元素）先添加一个名为’wow’的类名，再为其添加相应动画的动画名即可（这个可以到官网中查看自己想要的动画效果类名））。

<div class="wow lightSpeedIn"></div>

也可以为其添加以下四个属性：

属性说明
data-wow-duration更改动画持续时间
data-wow-delay动画开始前的延迟
data-wow-offset开始动画的距离（与浏览器底部相关）
data-wow-iteration动画的次数重复（无限次：infinite）

例如：

<div class="wow lightSpeedIn" data-wow-delay="1.5s"  data-wow-iteration："1"></div>

三、案例制作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 1.引入animate文件 -->
    <link rel="stylesheet" href="css/animate.min.css">
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .con {
            background: #f5f3f4;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            width: 800px;
            margin:auto;
        }

        .box {
            width: 150px;
            height: 150px;
            margin: 50px;
            box-shadow: 0 0 5px #ccc;
            border-radius: 50%;
            background: #457388;
            opacity: 0.8;
        }
    </style>
</head>

<body>
    <div class="con">
        <div class="box wow fadeInUp" data-wow-duration='1s'></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s'></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s'></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s'></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s'></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s'></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.1s"></div>
        <div class="box wow fadeInUp" data-wow-duration='1s' data-wow-delay="0.2s"></div>
    </div>
    <script src="js/wow.min.js"></script>
    <script>
        // 2.初始化
        // 如果不为ie6-9的浏览器，则进行一个初始化
        if (!(/msie [6|7|8|9]/i.test(navigator.userAgent))) {
            new WOW().init();
        };
    </script>
</body>

</html>

目录附带如下：
在这里插入图片描述
欢迎反馈文中表述不准确的地方或是不足之处~

# css3 # css # html # html5
Logo
GitCode 开源社区

旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。

更多推荐

[转载]在Windows环境下安装GNU Radio

转自：在Windows环境下安装GNURadio_恐弱智_新浪博客GNU Radio是用Python开发的，大部分开源的工程能够在Linux环境下运行良好，而Windows下却运行的很勉强，而且安装配置都很复杂。GNU Radio算是个例外了，不光提供了Windows的二进制安装，还有比较详细的说明。我是Python小白，所以折腾了好久才弄好，特意记录下来，免得以后再装还折腾。GNU Radio的

avatar GitCode 开源社区

centOS 8 使用dnf安装Docker

DNF是什么？CentOS 8使用YUM软件包管理器版本v4.0.4。现在，该版本使用DNF(已删除YUM)。DNF是软件包管理器。它会在Linux发行版上安装，执行更新并删除软件包。使用DNF安装Docker跳过具有损坏依赖性的程序包一个有效的解决方案是使您的CentOS 8系统使用以下--nobest命令安装最符合条件的版本：sudo dnf install docker...

avatar GitCode 开源社区

定时同步数据库表(mysql+linux+crontab)

sync.sh里面的参数需要改变，ip/username/password/database/tablesync.sh#!/bin/sh# Please change the IP and password of the data source db.# Then change the table name.filename=/home/nington/db/$(date +%Y-%m

avatar GitCode 开源社区