HTML新年快乐2023源代码，兔年新年红包代码，模仿微信红包打开红包特效。
在这里插入图片描述
完整代码下载地址：新年红包代码

index.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="https://blog.csdn.net/weixin_42756970" target="_blank">Python代码大全</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>

完整代码下载地址：新年红包代码

# html # 前端
Logo
华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

cover

又双叒叕种草了新家装风格？AI帮你家居换装

avatar 华为云开发者联盟
cover

执行计划缓存，Prepared Statement性能跃升的秘密

avatar 华为云开发者联盟

预约直播|揭秘鸿蒙全新流量阵地，元服务带来的体验变革

传统厚重的App，功能齐全，但开发成本高、周期长，且存在搜索、安装、卸载等一系列需要用户主动关注的显性操作，这些显性操作给用户带来了实质性的使用成本。”特点的元服务，是鸿蒙系统的一种全新的轻量化应用形态，可通过华为应用市场、负一屏、搜索等终端的多样化系统级智慧入口进行分发，用户无需安装，通过点击卡片、碰一碰、扫一扫等方式即可直接触发，享受 “即用即走”的流畅、丝滑体验。，现身说法，介绍小强停车在鸿

avatar 华为云开发者联盟