2023新年红包,兔年HTML红包页面代码【2023新年快乐_附源码】

文章目录

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

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

1.1 资源获取和效果预览

1.源码资源获取:

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

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

2.效果预览:

3.如何打开:(电脑端,解压后双击index.html打开!)

2023新年红包,兔年HTML红包页面代码【2023新年快乐_附源码】_第1张图片

二.代码讲解(Html文件)

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

<div class="redpacket hvr-buzz-out">
div>

这个div里面放俩个页面:

1.初始页面(未打开红包)。

2.打开红包页面。

2023新年红包,兔年HTML红包页面代码【2023新年快乐_附源码】_第2张图片

2023新年红包,兔年HTML红包页面代码【2023新年快乐_附源码】_第3张图片

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">

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

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

三.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">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>

你可能感兴趣的:(分享,html,javascript,前端)