1.源码资源获取:
https://download.csdn.net/download/weixin_52908342/87373505
快速通道:点击跳转下载新年红包,兔年HTML红包页面源码
2.效果预览:
3.如何打开:(电脑端,解压后双击index.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">2023div>
<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> <i
id="heartbeat" class="fa fas fa-heartbeat">i>
<span>2023span>
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">
需要源码的,请看文章开头处的源码下载链接。
有疑问请进入交流群反馈。
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">2023div>
<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> <i
id="heartbeat" class="fa fas fa-heartbeat">i>
<span>2023span>
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>