一. 前言
七夕马上就要到了,为了帮助大家高效表白,下面再给大家加几款实用的HTML浪漫表白代码(附源码)+背景音乐,可用于520,情人节,生日,求爱表白等场景,可直接使用。
来吧,展示!
1. 绚烂星空烟花+粉色大爱心
效果是动态的
代码
关键代码修改
修改名字
<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>
下载链接:https://download.csdn.net/download/qq_43030934/88239636
另外附上其他的告白HTML网页版的链接:文章来源:https://www.toymoban.com/news/detail-713992.html
- HTML浪漫动态表白代码+音乐(附源码)(一)
- HTML浪漫动态表白代码+音乐(附源码)(二)
希望可以帮助到你,还请不吝你的三连哦!文章来源地址https://www.toymoban.com/news/detail-713992.html
到了这里,关于HTML浪漫动态表白代码绚烂星空烟花+粉色大爱心+3D大小魔方旋转相册+音乐(附源码)(三)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!