一. 前言

七夕马上就要到了，为了帮助大家高效表白，下面再给大家加几款实用的HTML浪漫表白代码(附源码)+背景音乐，可用于520，情人节，生日，求爱表白等场景，可直接使用。

来吧，展示！

1. 绚烂星空烟花+粉色大爱心

效果是动态的

drawImage

代码

关键代码修改

修改名字

<div id="child"><h4>💗you and me💗</h4></div><!--这里写名字❤！！！-->

修改背景音乐，只要把音乐地址修改即可，可与当前目录相同

<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
    <source src="pianai.mp3" type="audio/ogg">
    <source src="pianai.mp3" type="audio/mpeg">
</audio>

html代码

js部分代码太长了就不贴出来了，文章末尾有链接可以下载

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>❤永远开心❤</title>

    <style>
        html, body {
            margin: 0px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background: #000;
        }

        #canvas {
            width: 100%;
            height: 100%;
        }

        html, body {
            height: 100%;
            padding: 0;
            margin: 0;
            background: #000;
        }

        canvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        #child {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);

        }

        h4 {
            font-family: "STKaiti";
            font-size: 40px;
            color: #f584b7;
            position: relative;
        }
    </style>
</head>
<body>
<div id="child"><h4>💗you and me💗</h4></div><!--这里写名字❤！！！-->
<canvas id="pinkboard"></canvas>
...

<audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
    <source src="daughtersLove.mp3" type="audio/ogg">
    <source src="daughtersLove.mp3" type="audio/mpeg">
</audio>
</body>
</html>

2. 绚烂星空烟花+3D旋转相册

在这里插入图片描述

代码

关键代码修改

修改名字

<div class="title-name"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->
<div class="title-name1"><h3>我❤喜欢你❤，请让我爱你一辈子</h3></div><!--这里写名字❤！！！-->

修改背景音乐，只要把音乐地址修改即可，可与当前目录相同

<div class="audio">
    <audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
        <source src="../pianai.mp3" type="audio/ogg">
        <source src="../pianai.mp3" type="audio/mpeg">
    </audio>
</div>

照片替换

<!--/*外层最大容器*/-->
<div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="img/150737-1620457657f28d.jpg" class="pic"/>
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="img/150824-16204577043623.jpg" class="pic"/>
        </div>
        <!--左图片 -->
        <div class="out_left">
            <img src="img/173640-1620466600fb9b.jpg" class="pic"/>
        </div>
        <div class="out_right">
            <img src="img/193151-162151031144dc.jpg" class="pic"/>
        </div>
        <div class="out_top">
            <img src="img/193257-16215103778919.jpg" class="pic"/>
        </div>
        <div class="out_bottom">
            <img src="img/203954-1623933594b335.jpg" class="pic"/>
        </div>
        <!--小正方体 -->
        <span class="in_front">
                <img src="img/211606-162324456621c4.jpg" class="in_pic"/>
            </span>
        <span class="in_back">
                 <img src="img/224204-1620744124ecd7.jpg" class="in_pic"/>
            </span>
        <span class="in_left">
                <img src="img/224716-16191892361adb.jpg" class="in_pic"/>
            </span>
        <span class="in_right">
                <img src="img/225658-162428741823f5.jpg" class="in_pic"/>
            </span>
        <span class="in_top">
                <img src="img/224813-1603896493456e.jpg" class="in_pic"/>
            </span>
        <span class="in_bottom">
                <img src="img/203954-1623933594b335.jpg" class="in_pic"/>
            </span>
    </div>
</div>

html代码

js/css代码太长就一起贴出来了，文章末尾有链接可以下载

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>3D表白相册</title>
    <link rel="stylesheet" href="css/index.css"/>
</head>
<body>
<!--/*外层最大容器*/-->
<div class="wrap">
    <!--    /*包裹所有元素的容器*/-->
    <div class="cube">
        <!--前面图片 -->
        <div class="out_front">
            <img src="img/150737-1620457657f28d.jpg" class="pic"/>
        </div>
        <!--后面图片 -->
        <div class="out_back">
            <img src="img/150824-16204577043623.jpg" class="pic"/>
        </div>
        <!--左图片 -->
        <div class="out_left">
            <img src="img/173640-1620466600fb9b.jpg" class="pic"/>
        </div>
        <div class="out_right">
            <img src="img/193151-162151031144dc.jpg" class="pic"/>
        </div>
        <div class="out_top">
            <img src="img/193257-16215103778919.jpg" class="pic"/>
        </div>
        <div class="out_bottom">
            <img src="img/203954-1623933594b335.jpg" class="pic"/>
        </div>
        <!--小正方体 -->
        <span class="in_front">
                <img src="img/211606-162324456621c4.jpg" class="in_pic"/>
            </span>
        <span class="in_back">
                 <img src="img/224204-1620744124ecd7.jpg" class="in_pic"/>
            </span>
        <span class="in_left">
                <img src="img/224716-16191892361adb.jpg" class="in_pic"/>
            </span>
        <span class="in_right">
                <img src="img/225658-162428741823f5.jpg" class="in_pic"/>
            </span>
        <span class="in_top">
                <img src="img/224813-1603896493456e.jpg" class="in_pic"/>
            </span>
        <span class="in_bottom">
                <img src="img/203954-1623933594b335.jpg" class="in_pic"/>
            </span>
    </div>
</div>

<div class="title-name"><h4>💗致亲爱的X女士</h4></div><!--这里写名字❤！！！-->
<div class="title-name1"><h3>我❤喜欢你❤，请让我爱你一辈子</h3></div><!--这里写名字❤！！！-->
<div class="audio">
    <audio autoplay="autoplay" loop="loop" preload="auto" id="music" controls>
        <source src="../pianai.mp3" type="audio/ogg">
        <source src="../pianai.mp3" type="audio/mpeg">
    </audio>
</div>

<canvas id="canvas"></canvas>
...
</body>
</html>