wow.js 仿度小满钱包首页

分类：代码日期：2022-11-21

wow.js 仿度小满钱包首页

wow.js 自发布以来，一直是比较流行的 js 动画库，它配合 Animate.css，使原本静态单调的页面更加生动活泼，让用户更加聚焦重点区域，达到更好的展示效果。今天我们来使用 wow.js 仿制度小满钱包首页。

1、引入文件

为了更方便的编写页面，我们同时引入 Tailwind CSS。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="force-rendering" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WOW.js演示-仿度小满钱包首页_dowebok</title>
    <link rel="stylesheet" href="https://www.dowebok.com/css/tailwind.min.css">
    <link rel="stylesheet" href="https://www.dowebok.com/css/animate.min.css">
    <link rel="stylesheet" href="https://www.dowebok.com/css/style.css">
</head>

<body>
    <script src="https://www.dowebok.com/js/wow.min.js"></script>
    <script src="https://www.dowebok.com/js/script"></script>
</body>
</html>

2、HTML

HTML 部分只展示中间动画部分。

<!-- 介绍1 -->
<ul class="introduce-1 w-1200 mx-auto py-16 text-center overflow-hidden">
    <li class="inline-block w-64 align-top wow fadeInUpBig">
        <h3 class="title title-1 mb-7 font-bold">度小满理财</h3>
        <p class="desc mx-auto text-sm text-gray-400">提供基金投资、活期理财、定期理财、高净值客户理财等多元化理财产品</p>
    </li>
    <li class="inline-block w-64 align-top wow fadeInUpBig" data-wow-delay="0.3s">
        <h3 class="title title-2 mb-7 font-bold">生活服务</h3>
        <p class="desc mx-auto text-sm text-gray-400">轻松消费，惠聚生活。缴费、充值和还款，满足您的便民生活需求</p>
    </li>
    <li class="inline-block w-64 align-top wow fadeInUpBig" data-wow-delay="0.6s">
        <h3 class="title title-3 mb-7 font-bold">有钱花</h3>
        <p class="desc mx-auto text-sm text-gray-400">闪电申请，秒级审批，分期交学费，先上课后还款</p>
    </li>
    <li class="inline-block w-64 align-top wow fadeInUpBig" data-wow-delay="0.9s">
        <h3 class="title title-4 mb-7 font-bold">度小满钱包</h3>
        <p class="desc mx-auto text-sm text-gray-400">团购、电影、出行等场景轻松消费，快捷支付</p>
    </li>
</ul>

<!-- 介绍2 -->
<div class="bg-gray-100">
    <ul class="introduce-2 w-1200 mx-auto py-12">
        <li>
            <div class="desc float-left text-right wow bounceInLeft" data-wow-delay="0.5s">
                <h3 class="title title-1 text-3xl">理财更安心</h3>
                <p class="inline-block w-72 mt-4 text-base text-gray-400">资金有规划，踏实又省心</p>
            </div>
            <div class="img img1 float-left wow bounceInRight" data-wow-delay="0.5s"></div>
        </li>
        <li>
            <div class="img img2 float-left wow bounceInLeft" data-wow-delay="0.5s"></div>
            <div class="desc float-left text-left wow bounceInRight" data-wow-delay="0.5s">
                <h3 class="title title-2 text-3xl">生活更便利</h3>
                <p class="inline-block w-72 mt-4 text-base text-gray-400">缴费、话费及流量充值、信用卡还款、固话宽带、加油卡充值、百度上门等丰富生活便民服务</p>
            </div>
        </li>
        <li>
            <div class="desc float-left text-right  wow bounceInLeft" data-wow-delay="0.5s">
                <h3 class="title title-3 text-3xl">贷款更快捷</h3>
                <p class="inline-block w-72 mt-4 text-base text-gray-400">闪电申请，秒级审批，分期交学费 先上课后还款</p>
            </div>
            <div class="img img3 float-left wow bounceInRight" data-wow-delay="0.5s"></div>
        </li>
        <li>
            <div class="img img4 float-left wow bounceInLeft" data-wow-delay="0.5s"></div>
            <div class="desc float-left text-left wow bounceInRight" data-wow-delay="0.5s">
                <h3 class="title title-4 text-3xl">支付更贴心</h3>
                <p class="inline-block w-72 mt-4 text-base text-gray-400">团购、电影、出行等场景支付快人一步，安全更贴心</p>
            </div>
        </li>
    </ul>
</div>