文章目录

• 一.新年红包，兔年HTML红包页面
• • 1.1 资源获取和效果预览
• 二.代码讲解（Html文件）
• 三.Html文件代码展示（需要全部源码请到文章开头链接处下载）

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

1.1 资源获取和效果预览

1.源码资源获取：

https://download.csdn.net/download/weixin_52908342/87373505

快速通道：点击跳转下载新年红包，兔年HTML红包页面源码

2.效果预览：

3.如何打开：（电脑端，解压后双击index.html打开！）

二.代码讲解（Html文件）

1.我们想要构成这么一个页面：我们可以先定义一个div盒子模型。

这个div里面放俩个页面：

1.初始页面（未打开红包）。

2.打开红包页面。

2.初始页面（未打开红包）

我们下载好源码之后，可以使用任意编辑器，更改下文的文字：可以将上进小菜猪替换为你想要的文字。

上进小菜猪_新年好
開

这里的open盒子调用了anime.min.js控制效果。

3.领取红包页面：

这里下面的文字也是可以自己更改为自己想要的效果：

        
2023
上进小菜猪_祝你笑口常开
6.66 元
将「😂笑口常开」设为状态 >

4.网页版权部分，这里是结尾，只是注明作者，大家可以忽略这一部分。

5.JavaScript函数部分

这里之所以将JavaScript函数写到html页面，是因为用来检测用户点击行为，并且调用js文件来进行处理点击打开红包。

6.引用的css文件

这里的css文件用于页面样式渲染。如果对前端较为熟练的朋友可以直接进行样式美化。

需要源码的，请看文章开头处的源码下载链接。

有疑问请进入交流群反馈。

三.Html文件代码展示（需要全部源码请到文章开头链接处下载）

上进小菜猪_新年好
開
2023
上进小菜猪_祝你笑口常开
6.66 元
将「😂笑口常开」设为状态 >