HTML新年快乐2023源代码，兔年新年红包代码

最新推荐文章于 2023-01-17 11:39:47 发布

Python代码大全

最新推荐文章于 2023-01-17 11:39:47 发布

阅读量1.3w

点赞数 4

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_42756970/article/details/127982290

版权

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>

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