HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站,可以任意修改和使用,源码已上传,演示网址如下。
🧡文章末尾-已经附上源码下载地址
🧡作者主页-更多源码
🧡100款七夕情人节告白源码-专栏文章
作品介绍
1.网页作品简介
:基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码
,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。
2.网页作品编辑
:任意HTML编辑软件(如:DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++
)均可修改网页。
文章目录
- HTML5七夕情人节表白网页❤生日蛋糕(蛋糕树)❤ HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 js烟花代码 css爱心表白
- 作品介绍
- 一、作品展示
- 二、文件目录
- 三、代码实现
- 四、学习资料
- 五、源码下载
- 六、更多源码
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>生日快乐</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<body>
<marquee style="position: fixed; top: 10px; color: #fff" scrollamount="10">Happy birthday! 生日快乐!</marquee>
<ul class="star" style="--v: 1; --t: 1;">
<li style="--i: 0"></li>
</ul>
<ul style="--v: 2; --t: 8; --direction:reverse">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
</ul>
<ul style="--v: 3; --t: 12">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
</ul>
<ul style="--v: 4; --t: 18; --direction:reverse">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
<li style="--i: 12"></li>
<li style="--i: 13"></li>
<li style="--i: 14"></li>
<li style="--i: 15"></li>
<li style="--i: 16"></li>
<li style="--i: 17"></li>
</ul>
<ul style="--v: 5; --t: 22">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
<li style="--i: 12"></li>
<li style="--i: 13"></li>
<li style="--i: 14"></li>
<li style="--i: 15"></li>
<li style="--i: 16"></li>
<li style="--i: 17"></li>
<li style="--i: 18"></li>
<li style="--i: 19"></li>
<li style="--i: 20"></li>
<li style="--i: 21"></li>
</ul>
<ul style="--v: 6; --t: 26; --direction:reverse">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
<li style="--i: 12"></li>
<li style="--i: 13"></li>
<li style="--i: 14"></li>
<li style="--i: 15"></li>
<li style="--i: 16"></li>
<li style="--i: 17"></li>
<li style="--i: 18"></li>
<li style="--i: 19"></li>
<li style="--i: 20"></li>
<li style="--i: 21"></li>
<li style="--i: 22"></li>
<li style="--i: 23"></li>
<li style="--i: 24"></li>
<li style="--i: 25"></li>
</ul>
<ul style="--v: 7; --t: 32">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 5"></li>
<li style="--i: 6"></li>
<li style="--i: 7"></li>
<li style="--i: 8"></li>
<li style="--i: 9"></li>
<li style="--i: 10"></li>
<li style="--i: 11"></li>
<li style="--i: 12"></li>
<li style="--i: 13"></li>
<li style="--i: 14"></li>
<li style="--i: 15"></li>
<li style="--i: 16"></li>
<li style="--i: 17"></li>
<li style="--i: 18"></li>
<li style="--i: 19"></li>
<li style="--i: 20"></li>
<li style="--i: 21"></li>
<li style="--i: 22"></li>
<li style="--i: 23"></li>
<li style="--i: 24"></li>
<li style="--i: 25"></li>
<li style="--i: 26"></li>
<li style="--i: 27"></li>
<li style="--i: 28"></li>
<li style="--i: 29"></li>
<li style="--i: 30"></li>
<li style="--i: 31"></li>
</ul>
<ul style="--v: 8; --t: 36; --direction:reverse">
<li style="--i: 0"></li>
<li style="--i: 1"></li>
<li style="--i: 2"></li>
<li style="--i: 3"></li>
<li style="--i: 4"></li>
<li style="--i: 30"></li>
<li style="--i: 31"></li>
<li style="--i: 32"></li>
<li style="--i: 33"></li>
<li style="--i: 34"></li>
<li style="--i: 35"></li>
</ul>
<p id="message" style="position:relative;margin-top:-40px;z-index:99999">
<img src="img/birthday.png" alt="Alternate Text" />
<br />
</p>
</main>
<div class="block-audio" style="z-index:10000;">
<audio src="music/3.mp3" autoplay="autoplay" loop="loop"></audio>
<!-- <audio class="exp" src="m/最爱.mp3" controls></audio>
<audio class="exp" src="m/exp1.mp3" controls></audio>
<audio class="exp" src="m/exp1.mp3" controls></audio>
<audio class="exp" src="m/exp1.mp3" controls></audio>
<audio class="exp" src="m/exp2.mp3" controls></audio>
<audio class="exp" src="m/exp2.mp3" controls></audio>
<audio class="exp" src="m/exp2.mp3" controls></audio>
<audio class="exp" src="m/exp3.mp3" controls></audio>
<audio class="exp" src="m/exp3.mp3" controls></audio>
<audio class="exp" src="m/exp3.mp3" controls></audio>
<audio class="exp" src="m/exp4.mp3" controls></audio>
<audio class="exp" src="m/exp4.mp3" controls></audio>
<audio class="exp" src="m/exp4.mp3" controls></audio>
<audio class="exp" src="m/exp5.mp3" controls></audio>
<audio class="exp" src="m/exp5.mp3" controls></audio>
<audio class="exp" src="m/exp5.mp3" controls></audio>
<audio class="exp" src="m/exp6.mp3" controls></audio>
<audio class="exp" src="m/exp6.mp3" controls></audio>
<audio class="exp" src="m/exp6.mp3" controls></audio>
<audio class="exp" src="m/exp7.mp3" controls></audio>
<audio class="exp" src="m/exp7.mp3" controls></audio>
<audio class="exp" src="m/exp7.mp3" controls></audio>
<audio class="exp" src="m/exp8.mp3" controls></audio>
<audio class="exp" src="m/exp8.mp3" controls></audio>
<audio class="exp" src="m/exp8.mp3" controls></audio>
<audio class="launch" src="m/launch1.mp3" controls></audio>
<audio class="launch" src="m/launch1.mp3" controls></audio>
<audio class="launch" src="m/launch2.mp3" controls></audio>
<audio class="launch" src="m/launch2.mp3" controls></audio>
<audio class="launch" src="m/launch3.mp3" controls></audio>
<audio class="launch" src="m/launch3.mp3" controls></audio>
<audio class="launch" src="m/launch4.mp3" controls></audio>
<audio class="launch" src="m/launch4.mp3" controls></audio>
<audio class="launch" src="m/launch5.mp3" controls></audio>
<audio class="launch" src="m/launch5.mp3" controls></audio> -->
</div>
<canvas id="canvas"></canvas>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/index1.js"></script>
<script src="js/script.js"></script>
</body>
</html>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码下载
【百度网盘-完整源码下载地址↓】
链接:点我下载源码 https://pan.baidu/s/1UdFzRE6mEKC5D1xALTMbYw
提取码:8888
六、更多源码
❤100款表白网页演示地址
❤100款表白网页在线视频演示
更多推荐
HTML5生日祝福蛋糕页面(生日蛋糕树) HTML+CSS+JS 求婚 html生日快乐祝福代码网页 520情人节告白代码 程序员表白源码 抖音3D旋转相册 j
发布评论