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

原创

IT司马青衫

发布于 2022-08-21 09:34:35

4950

发布于 2022-08-21 09:34:35

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

@TOC

一、网页介绍

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
}