一.新年红包，兔年HTML红包页面

1.1 资源获取和效果预览

1.源码资源获取：

https://download.csdn.net/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">2023</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">&copy;copyright by <a href="#" target="_blank">上进小菜猪</a> <i
                                                                                       id="heartbeat" class="fa fas fa-heartbeat"></i>
        <span>2023</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">2023</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">&copy;copyright by <a href="#" target="_blank">上进小菜猪</a> <i
                id="heartbeat" class="fa fas fa-heartbeat"></i>
            <span>2023</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>