首页banner
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>
3、JavaScript
new WOW().init()
到这里就制作完了，点击查看效果。
网友评论