文章目录
一.新年红包，兔年HTML红包页面1.1 资源获取和效果预览二.代码讲解（Html文件）三.Html文件代码展示（需要全部源码请到文章开头链接处下载）一.新年红包，兔年HTML红包页面
1.1 资源获取和效果预览
1.源码资源获取：
/download/weixin_52908342/87373505
快速通道：点击跳转下载新年红包，兔年HTML红包页面源码
2.效果预览：
3.如何打开：（电脑端，解压后双击index.html打开！）
二.代码讲解（Html文件）
1.我们想要构成这么一个页面：我们可以先定义一个div盒子模型。
<div class="redpacket hvr-buzz-out"></div>
这个div里面放俩个页面：
1.初始页面（未打开红包）。
2.打开红包页面。
2.初始页面（未打开红包）
我们下载好源码之后，可以使用任意编辑器，更改下文的文字：可以将上进小菜猪替换为你想要的文字。
<div class="content show"><div class="top"><h2 class="title">上进小菜猪_新年好</h2></div><div class="bottom"><div class="open">開</div><div class="line"></div></div></div>
这里的open盒子调用了anime.min.js控制效果。
3.领取红包页面：
这里下面的文字也是可以自己更改为自己想要的效果：
<div class="collect"><div class="collect_top"></div><div class="collect_bottom"><h3 class="collect_title">上进小菜猪_祝你笑口常开</h3><h2 class="price">6.66 <span>元</span></h2><div class="info"><a href="javascript:;">将「😂笑口常开」设为状态 ></a></div></div></div>
4.网页版权部分，这里是结尾，只是注明作者，大家可以忽略这一部分。
<footer><div class="copyright">©copyright by <a href="#" target="_blank">上进小菜猪</a> <iid="heartbeat" class="fa fas fa-heartbeat"></i><span></span></div></footer>
5.JavaScript函数部分
这里之所以将JavaScript函数写到html页面，是因为用来检测用户点击行为，并且调用js文件来进行处理点击打开红包。
<script>let redPacket = document.querySelector('.redpacket');let open = document.querySelector('.open');let content = document.querySelector('.content');let collect = document.querySelector('.collect');open.onclick = function () {this.classList = 'open rotate';setTimeout(function () {content.classList = 'content';collect.classList = 'collect show';open.classList = 'open';}, 3000);}</script>
6.引用的css文件
这里的css文件用于页面样式渲染。如果对前端较为熟练的朋友可以直接进行样式美化。
<link rel="stylesheet" href="./css/hover-min.css"><link rel="stylesheet" href="./lib/fontawesome-free-6.0.0-web/css/all.min.css"><link rel="stylesheet" href="./css/style.min.css"><link rel="stylesheet" href="./css/heartbeat.min.css">
需要源码的，请看文章开头处的源码下载链接。
有疑问请进入交流群反馈。
三.Html文件代码展示（需要全部源码请到文章开头链接处下载）
<!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>上进小菜猪新年红包</title><link rel="stylesheet" href="./css/hover-min.css"><link rel="stylesheet" href="./lib/fontawesome-free-6.0.0-web/css/all.min.css"><link rel="stylesheet" href="./css/style.min.css"><link rel="stylesheet" href="./css/heartbeat.min.css"></head><body><div class="container"><!-- 红包盒子 --><div class="redpacket hvr-buzz-out"><div class="content show"><div class="top"><h2 class="title">上进小菜猪_新年好</h2></div><div class="bottom"><div class="open">開</div><div class="line"></div></div></div><!-- 领取红包页面 --><div class="collect"><div class="collect_top"></div><div class="collect_bottom"><h3 class="collect_title">上进小菜猪_祝你笑口常开</h3><h2 class="price">6.66 <span>元</span></h2><div class="info"><a href="javascript:;">将「😂笑口常开」设为状态 ></a></div></div></div></div></div><footer><div class="copyright">©copyright by <a href="#" target="_blank">上进小菜猪</a> <iid="heartbeat" class="fa fas fa-heartbeat"></i><span></span></div></footer></body><script src="./js/anime.min.js"></script><script>let redPacket = document.querySelector('.redpacket');let open = document.querySelector('.open');let content = document.querySelector('.content');let collect = document.querySelector('.collect');open.onclick = function () {this.classList = 'open rotate';setTimeout(function () {content.classList = 'content';collect.classList = 'collect show';open.classList = 'open';}, 3000);}</script></html>
