表白代码，一文解决

1.作品介绍

开场用来表白或者道歉，后边来一场绚丽的烟花吧，烟花炸裂弹出文字，
所有文字皆可自定义，也可添加背景音乐，无需部署，打开即用！

2.效果图

告白绚烂烟花

3.部分代码

在这里插入代码片`<!--author:zhaotao-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <link rel="stylesheet" href="css/style.css" />
    <script
            id="jqbb"
            src="jquery.min.js"
    ></script>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
            background-color: black;
            user-select: none;
            margin: 0;
        }

        .city {
            width: 100%;
            position: fixed;
            bottom: 0px;
            z-index: 100;
        }

        .city img {
            width: 100%;
        }

        audio {
            opacity: 0;
        }
    </style>
    <title>❤陪伴❤</title>
    <!-- 弹窗样式 -->
    <link href="modal.css" rel="stylesheet" />
</head>

<body onselectstart="return false">
<div class="star comet"></div>
<script src="js/index.js"></script>

<!--对话部分-->
<div class="share_img"><img src="img/xin.png" alt="" /></div>
<div class="page_one">
    <div class="content">
        <div class="text_wrapper">
            <img class="xin" src="img/xin.png" alt="" />
            <div class="text">❤小不点儿，原谅我吧❤</div>
        </div>
    </div>
    <div class="btn-groups">
        <div class="heart-btn">
            <div id="yes" class="btn btn-a" onclick="myPlay()"><span>原谅</span></div>
        </div>
        <div id="no" class="btn btn-b" onclick="myPlay()"><span>不原谅</span></div>
    </div>
</div>
<!--烟花部分-->
<canvas id="cas" style="background-color: rgba(0, 5, 24, 1); z-index: 9999">
    浏览器不支持canvas
</canvas>
<div class="city">
    <img src="img/city.png" alt="" />
</div>
<img src="img/moon.png" alt="" id="moon" style="visibility: hidden" />
<div style="display: none">
<!--    <div class="shape"></div>-->
    <div class="shape">爱自己❤</div>
    <div class="shape">一生一世</div>
    <div class="shape">抛弃烦恼</div>
    <div class="shape">随遇而安</div>
    <div class="shape">家是永远的港湾</div>
    <div class="shape">陪伴是长情的告白</div>
</div>
<!--音乐部分-->
<audio autoplay loop id="music">
    <source src="mp3/music.mp3" />
</audio>

<script src="jquery.min.js"></script>
<script src="fire.js"></script>
<script src="talk.js"></script>
</body>
</html>
`

4.源码获取（可关注↓公众号：获取更多源码 !）

公众号搜索 “Java进步”，或者扫描以下二维码，回复： “唯美源码” 获取源码

关注公众号，随时学习最新内容，并与博主零距离交流！
在这里插入图片描述

表白代码，一文解决

1.作品介绍

2.效果图

3.部分代码

4.源码获取（可关注↓公众号 ：获取更多源码 !）

公众号搜索 “Java进步”，或者扫描以下二维码，回复 ： “唯美源码” 获取源码

猜你喜欢

4.源码获取（可关注↓公众号：获取更多源码 !）

公众号搜索 “Java进步”，或者扫描以下二维码，回复： “唯美源码” 获取源码