• 情人节程序员用HTML网页表白【情人节爱你的代码】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

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

    文章目录

    一、网页介绍

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

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

    一、网页效果

    在这里插入图片描述

    在这里插入图片描述

    二、代码展示

    1.HTML代码

    代码如下（示例）：以下仅展示部分代码供参考~

    

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>I Love You Forevertitle>
		<meta name="author" content="Mike">
		
		<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
		
		<script type="text/javascript" src="js/jquery.js">script>
		
		<script type="text/javascript" src="js/roundabout.js">script>
		<script type="text/javascript" src="js/roundabout_shapes.js">script>
		<script type="text/javascript" src="js/gallery_init.js">script>
		
		<script type="text/javascript" src="js/snowstorm.js">script>
				
		<script type="text/javascript" src="js/text.js">script>
		
		<script type="text/javascript" src="js/ga.js" async="">script>
		<script type="text/javascript" src="js/heart.js">script>
		
		<script type="text/javascript" src="js/move.js">script>
		
		<script type="text/javascript" src="js/time.js">script>
		
		<script type="text/javascript" src="js/makesnake.js">script>head><body>
		
		<span id="span0" class="spanstyle">Tspan><span id="span1" class="spanstyle">hspan>
		<span id="span2" class="spanstyle">aspan><span id="span3" class="spanstyle">nspan>
		<span id="span4" class="spanstyle">kspan><span id="span5" class="spanstyle">sspan><span id="span6" class="spanstyle">
		 span><span id="span7" class="spanstyle">fspan><span id="span8" class="spanstyle">ospan><span id="span9" class="spanstyle">rspan>
		 <span id="span10" class="spanstyle"> span><span id="span11" class="spanstyle">wspan>
		 <span id="span12" class="spanstyle">aspan><span id="span13" class="spanstyle">tspan><span id="span14" class="spanstyle">cspan><span id="span15" class="spanstyle">hspan>
		 <span id="span16" class="spanstyle">ispan><span id="span17" class="spanstyle">nspan><span id="span18" class="spanstyle">gspan><span id="span19" class="spanstyle">!span>
	

	
		<script type="text/javascript">
			setTimeout(makesnake, 42000);
		script>
		
		<div id="header" style="opacity:0.85">
			<div id="title">
				I Love You Forever
			div>
		div>

		
		<div id="myContent">
				<span id="blink" style="display: none;">_span>div>
		<div id="contentToWrite" style="display:none">
			一时间不知道从哪说起,         <br>
				真爱来了，我们要好好把    <br>
				一时间不知道从哪说起,         <br>
				真爱来了，我们要好好把握。不管面临多大的压力，<br>
				不管前面的路如何崎岖.<br>
				不管经历过什么,我仍坚信最浪漫的事就是和<br>
				你一起慢慢变老.<br>
				还记得否,曾经的点点滴滴，从相识到现在，<br>
				从冷漠到关心,从谢绝到依赖，从生疏到相爱,<br>
				一切似乎都是那么遥远,又似乎那么触手可及.<br>
				正如某人说的那样,但求岁月静好,现世安稳.<br>
				一生守候不是一句简单而苍白的山盟海誓，<br>
				而是无数个平淡的日子同舟共济，相濡以沫.<br>
				相信右下角的计时器,将永远继续下去,直至数据溢出.<br>
				<br>
				-----------------------Just for You, YaRu<br>
		div>
		<script type="text/javascript">
			writeContent(true);
		script>
		

		
		<div id="container">
			<ul id="myRoundabout" class="roundabout-holder" style="padding: 0px; position: relative; z-index: 100;">
		  	<li class="roundabout-moveable-item roundabout-in-focus" current-scale="1.0000" style="position: absolute; left: 122px; top: 87px; width: 350px; height: 222px; opacity: 1; z-index: 400; font-size: 16px;"><img src="img/1.jpg" alt="">li>
			<li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: -0.4px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/2.jpg" alt="">li>
			<li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: 473.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/3.jpg" alt="">li>
			<li class="roundabout-moveable-item" current-scale="0.4573" style="position: absolute; left: -39.8px; top: 147.2px; width: 160.055px; height: 101.5206px; opacity: 1; z-index: 129; font-size: 7.32px;"><img src="img/4.jpg" alt="">li>
			<li class="roundabout-moveable-item" current-scale="0.7927" style="position: absolute; left: 317px; top: 110px; width: 277.445px; height: 175.9794px; opacity: 1; z-index: 296; font-size: 12.68px;"><img src="img/5.jpg" alt="">li>
		  ul>
		div>
		<script type="text/javascript">
			setTimeout(move, 15000);
		script>
  		
  		
		<div id="bg">
			<canvas id="garden" width="1583" height="709"><c style="color: #FFF; text-shadow:2px 3px 3px #222; font-family:Microsoft YaHei; font-size:50px">你的浏览器过时了,试试火狐吧!c>canvas>
		div>

		
		<div id="time">
			<span id="show">span>
			<script type="text/javascript">
				setTimeout("showTime()", 40000);
			script>
		div>

	
	

body>



    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106

    2.CSS代码

    

/* Global properties ======================================================== */
body { 
	background:#6f599c;
	background-image:url(../images/bg.jpg) ;
	text-align:left;
}

/* Global Structure ============================================================= */
/* Header */
#header{
	position:absolute;
	left:0px;
	top:5px;
	overflow:hidden;
	height:70px;
	font-family:Microsoft YaHei;
	font-weight: 900;
	font-size:40px;
	padding-bottom:5px;
	width: 100%;
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	opacity:0.7;
}
	
#myContent{
	position:absolute;
	left:80px;
	top:130px;
	overflow:hidden;
	text-shadow: 2px 3px 3px #000; 
	font-family:Microsoft YaHei;
	font-style:italic;
	font-weight:500;
	font-size:20px;
	color:#CCCCCC;
}

#container{
	overflow:hidden;
	position:absolute;
	left:630px;
	top:220px;
	width:650px;
	opacity:0;
	filter:alpha(opacity=0.7)
}

#title{
	position:absolute;
	left:28%;
	top:0px;
	padding:10px;
	overflow:hidden;
	text-shadow: 2px 3px 3px #222; 
	color:#CCCCCC;
}

#footer {
	position:absolute;
	left:32%;
	top:91%;
	overflow:hidden;
	text-shadow: 2px 3px 3px #222; 
	font-family:Microsoft YaHei;
	font-style:italic;
	font-size:20px;
	color:#CCCCCC;
}



#time{
	position:absolute;
	left:750px;
	top:400px;
	overflow:hidden;
}

#show{
	color:#CCCCCC;
	text-shadow: 2px 3px 3px #222; 
	font-family:Microsoft YaHei;
	font-style:italic;
	font-size:20px;
}


#bg{
	overflow:hidden;
}

.roundabout-holder  { 
	width:600px;
	height:400px;
	margin:0 auto;
}
.roundabout-moveable-item {
	width: 350px;
	height: 222px;
	cursor: pointer;
	border:3px solid #ccc;
	border:3px solid rgba(0, 0, 0, 0.08);
    border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}
.roundabout-moveable-item img{
	width:100%;
}
.roundabout-in-focus {
	border:3px solid rgba(0, 0, 0, 0.2);
}

ol, ul {
	list-style: none;
}

img {
	vertical-align:top; 
}

.spanstyle{
	color:#CCFF99;
	font-family:courier;
	text-shadow: 2px 2px 1px #222; 
	font-style:italic;
	font-weight:600;
	font-size:20px;
	position:absolute;		/* 绝对定位 */
	top:-50px;
	overflow:hidden;
}





    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64
    • 65
    • 66
    • 67
    • 68
    • 69
    • 70
    • 71
    • 72
    • 73
    • 74
    • 75
    • 76
    • 77
    • 78
    • 79
    • 80
    • 81
    • 82
    • 83
    • 84
    • 85
    • 86
    • 87
    • 88
    • 89
    • 90
    • 91
    • 92
    • 93
    • 94
    • 95
    • 96
    • 97
    • 98
    • 99
    • 100
    • 101
    • 102
    • 103
    • 104
    • 105
    • 106
    • 107
    • 108
    • 109
    • 110
    • 111
    • 112
    • 113
    • 114
    • 115
    • 116
    • 117
    • 118
    • 119
    • 120
    • 121
    • 122
    • 123
    • 124
    • 125
    • 126
    • 127
    • 128
    • 129
    • 130
    • 131
    • 132
    • 133
    • 134
    • 135
    • 136
    • 137
    • 138
    • 139

    三、精彩专栏

    看到这里了就 【点赞，关注，收藏】 三连 支持下吧，你的支持是我创作的动力。

  • 相关阅读:
    kafka 动态扩容现有 topic 的分区数和副本数
    LeetCode 1704. 判断字符串的两半是否相似
    【SpringCloud-Seata分布式事物】
    .NET Worker Service 作为 Windows 服务运行及优雅退出改进
    《Effective Java》知识点（11）--序列化
    C++中的静态库与动态库
    获取该虚拟机的所有权失败，主机上的某个应用程序正在使用该虚拟机
    XAI将创建一套机器学习技术，使人类用户能够理解、适当信任并有效管理新一代人工智能合作伙伴
    中国高产水稻促粮食增产 国稻种芯：为碳减排做出重要贡献
    C++11 新特性
  • 原文地址：https://blog.csdn.net/VX_WJ88950106/article/details/126202887