情人节程序员用HTML网页表白【生日快乐动画】HTML+CSS+JavaScript HTML5七夕情人节表白网页源码

已于 2023-12-07 14:29:23 修改
阅读量132 收藏 1
点赞数
分类专栏： html期末大作业 dw静态网页设计与制作 web前端大作业 文章标签： javascript html css
于 2022-08-09 16:12:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/html_wangye/article/details/126173109
版权

这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。

❤ 【作者主页——🔥获取更多优质源码】

❤ 【学习资料/简历模板/面试资料/ 网站设计与制作】

❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例】

文章目录

一、网页介绍

1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用

2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。

一、网页效果

在这里插入图片描述

在这里插入图片描述

二、代码展示

1.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>

2.CSS代码


html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,del,dfn,em,img,ins,kbd,q,samp,small,strong,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,table,tbody,tfoot,thead,tr,th,td,article,aside,footer,header,nav,section {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent
}

body {
	-webkit-text-size-adjust: none;
	font-family: sans-serif
}

h1 {
	font-size: 33px;
	margin: 50px 0 15px;
	text-align: center;
	color: #212121
}

h2 {
	font-size: 14px;
	font-weight: bold;
	color: #3c3c3c;
	margin: 20px 10px 10px
}

small {
	margin: 0 10px 30px;
	display: block;
	font-size: 12px
}

a {
	margin: 0 0 0 10px;
	font-size: 12px;
	color: #3c3c3c
}

img {
	border: 0
}

ol,ul,li {
	list-style-type: none
}

html,body {
	width: 100%;
	height: 100%;
	transform-style: preserve-3d;
	backface-visibility: hidden;
	perspective: 1000;
	-webkit-transform-style: preserve-3d;
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000
}

#content {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	position: absolute
}

.content-wrap {
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 100%
}

.content-wrap>li {
	width: 100%;
	height: 100%;
	float: left;
	background-size: 100% 100%;
	overflow: hidden;
	position: relative
}

.charector {
	position: absolute;
	left: -6%;
	top: 55%;
	position: absolute;
	width: 100%;
	height: 100%;
	width: 151px;
	height: 291px;
	-webkit-transform: 'translateX(0px)';
	-webkit-backface-visibility: hidden;
	-webkit-perspective: 1000;
	background:url(../images/boy.png) -0px -291px no-repeat
}

.slowWalk {
	-webkit-animation-name: person-slow;
	-webkit-animation-duration: 950ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: steps(1,start);
	-moz-animation-name: person-slow;
	-moz-animation-duration: 950ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: steps(1,start)
}

.slowFlolerWalk {
	-webkit-animation-name: person-floler-slow;
	-webkit-animation-duration: 950ms;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: step-start;
	-moz-animation-name: person-floler-slow;
	-moz-animation-duration: 950ms;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: step-start
}

.pauseWalk {
	-webkit-animation-play-state: paused
}

.boyOriginal {
	background-position: -150px -0px
}

@-webkit-keyframes person-slow {
	0% {
		background-position: -0px -291px
	}

	25% {
		background-position: -602px -0px
	}

	50% {
		background-position: -302px -291px
	}

	75% {
		background-position: -151px -291px
	}

	100% {
		background-position: -0px -291px
	}
}

@-moz-keyframes person-slow {
	0% {
		background-position: -0px -291px
	}

	25% {
		background-position: -602px -0px
	}

	50% {
		background-position: -302px -291px
	}

	75% {
		background-position: -151px -291px
	}

	100% {
		background-position: -0px -291px
	}
}

@-webkit-keyframes person-floler-slow {
	0% {
		background-position: -453px -0px
	}

	25% {
		background-position: -904px -0px
	}

	50% {
		background-position: -451px -0px
	}

	75% {
		background-position: -753px -0px
	}

	100% {
		background-position: -300px -0px
	}
}

@-moz-keyframes person-floler-slow {
	0% {
		background-position: -453px -0px
	}

	25% {
		background-position: -904px -0px
	}

	50% {
		background-position: -451px -0px
	}

	75% {
		background-position: -753px -0px
	}

	100% {
		background-position: -300px -0px
	}
}

.boy-rotate {
	-webkit-animation-name: boy-rotate;
	-webkit-animation-duration: 850ms;
	-webkit-animation-iteration-count: 1;
	-webkit-animation-timing-function: step-start;
	-webkit-animation-fill-mode: forwards;
	-moz-animation-name: boy-rotate;
	-moz-animation-duration: 850ms;
	-moz-animation-iteration-count: 1;
	-moz-animation-timing-function: step-start;
	-moz-animation-fill-mode: forwards
}

@-webkit-keyframes boy-rotate {
	0% {
		background-position: -603px -291px
	}

	16.7% {
		background-position: -150px -0px
	}

	33.4% {
		background-position: -453px -291px
	}

	50.1% {
		background-position: -0px -0px
	}

	66.8% {
		background-position: -903px -291px
	}

	83.5% {
		background-position: -753px -291px
	}

	100% {
		background-position: -603px -291px
	}
}

@-moz-keyframes boy-rotate {
	16.7% {
		background-position: -150px -0px
	}

	33.4% {
		background-position: -453px -291px
	}

	50.1% {
		background-position: -0px -0px
	}

	66.8% {
		background-position: -903px -291px
	}

	83.5% {
		background-position: -753px -291px
	}

	100% {
		background-position: -603px -291px
	}
}

.button {
	position: absolute;
	top: 82%
}

button {
	width: 80px;
	height: 50px
}

三、精彩专栏

看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。—— `3.

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

html精品源码
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值