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

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号 获取更多源码 !

相关知识

HTML5期末大作业：鲜花网站设计——网上鲜花网页设计(5页) HTML+CSS+JavaScript 期末作业HTML代码
HTML5期末大作业：网上花店/鲜花网站设计——大气的鲜花预订商城(6页) HTML+CSS+JavaScript
七夕送什么花表白好 情人节送花攻略大全
七夕情人节送花花语
七夕情人节送花,七夕情人节送花送什么花,51788鲜花
情人节送花表白贺卡 情人节送花贺卡
七夕情人节送花有什么讲究和寓意？
济宁花店情人节订及表白鲜花七夕鲜花生日鲜花玫瑰花买开业花篮大麦花篮
七夕情人节表白送什么花？七夕情人节送对花表白加成
（精选）七夕情人节送花花语有哪些

网址: HTML5七夕情人节表白送花网页制作(HTML+CSS+JavaScript) https://www.huajiangbk.com/newsview380055.html