HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript)

520七夕节告白,也就是中国的情人节,你除了送花你还会什么？？ 快来制作高端大气上档次的表白网页吧

尽管没有深情的告白，也没有诚挚的诺言，但在顺其自然中我们就成为了彼此的唯一。余生漫漫，我愿与你风雨中执手，平淡中偕老。

表白作品介绍

1.网页作品简介方面 ：520❤七夕情人节❤告白网页HTML ,喜欢的可以下载，文章页支持手机PC响应式布局。可直接替换相片就能用噢!

2.网页作品编辑方面：此作品为七夕情人节告白网页设计题材，代码华丽炫酷 HTML+CSS+JavaScript 布局制作，作品下载后可使用任意HTML编辑软件(例如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm 所有编辑器均可使用)

1.PC端电脑端(演示)

>>>点击进入>>>100款❤表白源码演示地址

二、代码目录

三、代码实现 (教程)

html(部分)

音乐替换:如需更换mp3背景音乐,可自行下载后并找到mp3 文件夹 更换即可~ 戳我>>>免费下载MP3
注意: 下载后的音乐文件需要修改名称 和mp3文件夹里的 的名字保持一致即可

     <div id="content"><ul class="content-wrap"><!-- 第一副画面 --><li><!-- 背景图 --><div class="a_background"><div class="a_background_top"></div><div class="a_background_middle"></div><div class="a_background_botton"></div></div><!-- 云 --><div class="cloudArea"><div class="cloud cloud1"></div><div class="cloud cloud2"></div></div><!-- 太阳 --><div id="sun"></div></li><!-- 第二副画面 --><li><!-- 背景图 --><div class="b_background"></div><div class="b_background_preload"></div><!-- 商店 --><div class="shop"><div class="door"><div class="door-left"></div><div class="door-right"></div></div><!-- 灯 --><div class="lamp"></div></div><!-- 鸟 --><div class="bird"></div></li><!-- 第三副画面 --><li><!-- 背景图 --><div class="c_background"><div class="c_background_top"></div><div class="c_background_middle"></div><div class="c_background_botton"></div></div><!-- 小女孩 --><div class="girl"></div><div class="bridge-bottom"><div class="water"><div id="water1" class="water_1"></div><div id="water2" class="water_2"></div><div id="water3" class="water_3"></div><div id="water4" class="water_4"></div></div></div><!-- 星星 --><ul class="stars"><li class="stars1"></li><li class="stars2"></li><li class="stars3"></li><li class="stars4"></li><li class="stars5"></li><li class="stars6"></li></ul><!-- 慕课网logo图 --><div class="logo">祝天下有情人终成眷属</div></li></ul><!-- 雪花 --><div id="snowflake"></div><!-- 小男孩 --><div id="boy" class="charector"></div></div>

---

css (部分)

.a_background {width: 100%;height: 100%;position: absolute
}.a_background_top {width: 100%;height: 71.6%;background-image: url("../images/55addf6900019d8f14410645.png");background-size: 100% 100%
}.a_background_middle {width: 100%;height: 13.1%;background-image: url("../images/55addf800001ff2e14410118.png");background-size: 100% 100%
}.a_background_botton {width: 100%;height: 15.3%;background-image: url("../images/55addfcb000189b314410138.png");background-size: 100% 100%
}.cloud {z-index: 2;position: absolute
}.cloud1 {width: 100%;height: 30%;left: -5%;top: 15%;background: url("../images/55addfde0001aec501810101.png") no-repeat;-webkit-animation-name: smallCloud;-webkit-animation-duration: 30s;-webkit-animation-iteration: infinite;-moz-animation-name: smallCloud;-moz-animation-duration: 30s;-moz-animation-iteration: infinite
}.cloud2 {width: 100%;height: 100%;right: -5%;background: url("../images/55addff500016df503010140.png") no-repeat;-webkit-animation-name: largeCloud;-webkit-animation-duration: 50s;-webkit-animation-iteration: infinite;-moz-animation-name: largeCloud;-moz-animation-duration: 50s;-moz-animation-iteration: infinite
}@-webkit-keyframes smallCloud {0% {left: -5%}100% {left: 100%}
}@-moz-keyframes smallCloud {0% {left: -5%}100% {left: 100%}
}@-webkit-keyframes largeCloud {0% {right: -5%}100% {right: 100%}
}@-moz-keyframes largeCloud {0% {right: -5%}100% {right: 100%}
}#sun {background: url("../images/55ade004000106c202010201.png") no-repeat;position: absolute;z-index: 1;top: -30px;height: 201px;width: 201px;right: 100px;-webkit-transform: rotate(45deg);-webkit-animation-name: rotation;-webkit-animation-duration: 60s;-webkit-animation-iteration: 1;-webkit-animation-fill-mode: forwards;-moz-transform: rotate(45deg);-moz-animation-name: rotation;-moz-animation-duration: 60s;-moz-animation-iteration: 1;-moz-animation-fill-mode: forwards
}@-webkit-keyframes rotation {0% {transform: translateX(0) translateY(0) rotate(45deg)}100% {transform: translateX(-2000px) translateY(400px) rotate(70deg)}
}@-moz-keyframes rotation {0% {transform: translateX(0) translateY(0) rotate(45deg)}100% {transform: translateX(-2000px) translateY(400px) rotate(70deg)}
}

---

四、web前端入门到高级(视频+源码+资料+面试)一整套 (教程)

web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站

---

五、源码获取

❉ ~ 关注我，点赞博文~ 每天带你涨知识!

❉1.看到这里了就 [点赞+好评+收藏] 三连 支持下吧，你的「点赞，好评，收藏」是我创作的动力。

❉ 2.关注我 ~ 每天带你学习 :各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、期末大作业模板 、等! 「在这里有好多 前端 开发者，一起探讨 前端 Node 知识，互相学习」！

❉3.以上内容技术相关问题可以相互学习，可关注↓公Z号 获取更多源码 !