七夕给女朋友准备的小惊喜网站制作(html+css+js)

于 2022-10-01 00:24:30 发布
阅读量1.9k 收藏 4
点赞数 1
分类专栏： 网页设计与制作 文章标签： css html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_38512571/article/details/127130716
版权

❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！

📂文章目录

二、📚网站介绍

📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；

📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现

三、🔗网站效果

▶️1.视频演示

63-生日快乐动画(音乐)

🧩 2.图片演示

在这里插入图片描述

四、💒 网站代码

🧱HTML结构代码


<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>别不快乐生日快乐！</title>
    <link rel='stylesheet' href='css/style.css' />
    <link rel='stylesheet' href='css/pageA.css' />
    <link rel='stylesheet' href='css/pageB.css' />
    <link rel='stylesheet' href='css/pageC.css' />
    <script type="text/javascript" src="js/query.js"></script>
    <script type="text/javascript" src="js/transit.js"></script>
    <script type="text/javascript" src="js/HappyBirth.js"></script>
</head>

<body>
    <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>
                
                <div class="logo"></div>
            </li>
        </ul>
        <!-- 雪花 -->
        <div id="snowflake"></div>
        <!-- 小男孩 -->
        <div id="boy" class="charector"></div>
    </div>
</body>

</html>

🏠CSS样式代码



.a_background {
	width: 100%;
	height: 100%;
	position: absolute
}

.a_background_top {
	width: 100%;
	height: 71.6%;
	background-image:url(../images/a/a_background_top.png);
	background-size: 100% 100%
}

.a_background_middle {
	width: 100%;
	height: 13.1%;
	background-image:url(../images/a/a_background_middle.png);
	background-size: 100% 100%
}

.a_background_botton {
	width: 100%;
	height: 15.3%;
	background-image:url(../images/a/a_background_botton.png);
	background-size: 100% 100%
}

.cloud {
	z-index: 2;
	position: absolute
}

.cloud1 {
	width: 100%;
	height: 30%;
	left: -5%;
	top: 15%;
	background:url(../images/cloud/cloud1.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/cloud/cloud2.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/sun.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)
	}
}

五、🎁更多源码

1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！

2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!

📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻

web网站建设
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML5七夕情人节表白网页制作【结婚倒计时】HTML+CSS+JavaScript html生日快乐祝福网页制作
QQ_____365392777的博客
08-16 215
1 网页简介：基于HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用等任意html编辑软件进行运行及修改编辑等操作）。......
给女朋友的网页设计/网页设计期末作业
01-10
给女朋友的网页设计 在index.html中修改需要的的文字； 在js的文件中，修改time.js和move.js与之对应的文字；可以修改文本右下角的文本及鼠标对应的文本； 在images中修改相对应的图片，格式jpg，五张设计；
制作粉色少女系列 生日快乐祝福网页（HTML+CSS+JS）
qq_365392777
10-11 2万+
程序员爱情❤520/表白/七夕情人节/求婚❤专用html5+css3+js 生日快乐网站模板 HTML生日快乐祝福网页模板，该模板有多种动态效果图，全局采用蓝色装饰，适用于给女朋友的生日祝福，只需简单修改，即可用网页生成打开。 戳下方链接↓查看线上演示地址​​0.生日演示地址​​ 账号是 cyl 密码是 1007​​...
给女朋友表白节日送给女朋友的网页（精美）
qq_29875625的博客
01-07 1万+
下载地址：https://download.csdn.net/download/qq_29875625/10894409            
520创意表白网站，让女友对你死心塌地。女神轻松领回家
池鱼
06-25 1万+
可能很多女生都会觉得程序员都是直男，不懂浪漫。但是！！！看完这个教程之后，让女友对你死心塌地。 这是一个基于js和html搭建的简单界面，你只需要把代码下载下来，然后再简单的改一下代码信息，就可以去跟女神表白了。 目录一：项目展示二：使用方法三：项目部署 一：项目展示 项目效果： 在线演示： https://xuyuanzhi051.github.io/My520/ 二：使用方法 使用方法：下载代码包，自行替换文本和图片即可。 项目源码：https://github.com/xuyuanzhi051/.
HTML5七夕情人节表白网页制作【粉色樱花雨3D相册】HTML+CSS+JavaScript
HTML网页设计
07-21 1万+
1 网页简介：基于 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。代码如下（示例）：以下仅展示部分代码供参考~ 2.CSS代码 三、精彩专栏推荐： 看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。HTM
基于HTML+CSS+JS实现的七夕给女朋友做的聊天表白机器人
最新发布
10-28
【HTML+CSS+JS实现的七夕聊天表白机器人详解】 在网页开发中，HTML、CSS和JavaScript是构建交互式Web应用的三大核心技术。本项目利用这三者的优势，创造了一个富有创意的七夕聊天表白机器人，旨在为情侣提供一个...
情人节程序员用HTML网页表白【全屏3D相册】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
该标题和描述中提及的HTML5网页设计项目，涉及到了HTML5、CSS3以及JavaScript技术在实际网页开发中的应用。其中，“全屏3D相册”作为项目的亮点之一，充分展示了HTML5在网页交互性和视觉效果方面的强大能力。 #### ...
情人节程序员用HTML网页表白【做我女朋友】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript
08-10
- **Text** 和 **Notepad++**：轻量级的文本编辑器，适合简单的HTML/CSS/JS编码工作。 ### 知识点五：HTML5新特性 #### 5.1 新标签 - ****：用于定义文档或节的页眉。 - ****：用于定义页面的导航链接部分。 - ***...
送给女朋友的精美网页
12-22
不管是情人节还是什么节日，只要拥有它，女朋友看了绝对喜欢！！图片，每件事情的日期全部都改成自己的日期，图片替换成自己的图片。
疫情下给女友写的表白网站.zip
05-25
疫情下给女友写的一表达心意静态网站，希望大家也有用；学过前端入门的也可以看懂，使用的是简单的html+css3+少量js
前端html+css+JavaScript+服务器七夕写给女朋友的网站，祝大家七月初七七夕节快乐！
08-04
使用的是服务器，Vue前端框架写的登录界面框架，css样式，JavaScript语言，然后由于服务器就买了一天，只是为了博女朋友开心，所以大家只需要复制代码源即可，代码源可以右键鼠标再程序代码源里就可以找到！...
圣诞节 html+css3+js 雪花飘落3D相册(含背景音乐) 程序员表白必备
12-22
圣诞节快到了，是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现3D立体动态相册。赶紧学会了，来制作属于我们程序员的浪漫吧！ 演示地址:...
HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)
七夕情人节表白网页代码100款 HTML5网页设计与制作1120款 Echarts大屏数据150款
07-21 1万+
❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字) 一年一度的520情人节/七夕情人节/女朋友生日/程序员表白,是不是要给女朋友或者正在追求的妹子一点小惊喜呢，今天这篇博客就分享下前端代码如何实现HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)。赶紧学会了，来制作属于我们程序员的浪漫吧！ ❉ 文章目录 ❉ HTML+CSS+JavaScript制作七夕表白网页(含音乐+自定义文字)❉ 效果演示❉ 代码文件目录一、文字修改(代码实现)
七夕送给女朋友的html页面(超精美)
qq_66810909的博客
08-04 5076
如何做一个网页送给女朋友做情人节礼物本文里面涉及到python，HTML ，css,JavaScript的知识，是基于python的框架做的一个小型网站，里面可以实现跳转功能，怎么配置flask的环境变量，去官方文档看就好了，里面写的很详细然后这个是我们的一个总的其中是用来存放我们的动态文件包括css,js,图片，音频等等，templates是用来存放html文件的，然后py文件是我们的后端，用来实现页面的跳转功能。...
七夕节送给女友的10个经典网站
liagruochen的专栏
08-13 8106
<br /> <br />七夕节就要到了，女朋友早就下了通牒，叫我无论如何送上一份大礼，就在小生为女友的七夕礼物大伤脑筋的时候，突然脑瓜一拍，有了！一个不花钱还心意浓浓的七夕礼物在我绝顶聪明的大脑里产生了，女友是一个标准的网虫，为了给女友一个大大的意外惊喜，我决定给女友献上我精心收集的10个网站，美名其曰十全十美十女十爱的十大网站，要知道这些可都是美眉们喜欢的网站哦！<br /> <br />1：淘宝网 http://www.amazon.cn<br />把这个放在第一个，主要因为女友就是一个典型的败家女，
恋爱周年纪念日-送给女友的网页
John_zsz的博客
05-22 4619
一、在本科期间有一次学习制作网页的机会，实训期间两周，任务是利用HTML语言做一个小网页。当时感觉老师讲的认真，就挺感兴趣的，就从头到尾把整个课程听完了。研究生专业是海上通信，最近是和女友的恋爱六周年纪念日，打算做一个有意义东西送给她，就琢磨把之前学习的HTML语言应用一下，做个网页送给她。 由于不是专业的，在编写代码过程参考了一些博主的实例，各位伙伴在阅读过程中发现有问题的地方，欢迎指正，大家共同进步~ 二、言归正传，做这个网页的目的是为了能够直接在浏览器上输入网址，然后直接弹出我制作网页的主页，通过
如何做一个网页送给女朋友做生日礼物
热门推荐
zyh960的博客
07-30 4万+
如何做一个网页送给女朋友做生日礼物 本文里面涉及到python，HTML ，css,JavaScript的知识，是基于python的flask框架做的一个小型网站，里面可以实现跳转功能，怎么配置flask的环境变量，去官方文档看就好了，里面写的很详细 flask官方中文文档 然后这个是我们的一个总的框架 其中static是用来存放我们的动态文件包括css,js,图片，音频等等，templates是用来存放html文件的，然后py文件是我们的后端，用来实现页面的跳转功能 #先设置一个变量，方便我们跳转 @ap
基于HTML+CSS+JavaScript的七夕情人节表白网页设计
HTML+CSS+JavaScript七夕情人节表白网页【樱花雨3D相册】超好看 本资源是一个基于HTML、CSS、JavaScript的七夕情人节表白网页，采用DIV+CSS布局，共有多个页面，首页使用CSS排版比较丰富，色彩鲜明有活力，顶部导航...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web网站建设

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值