这是程序员表白系列中的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 charset="utf-8">
<title>关小曼，我爱你！我愿用一生的爱来守候你！</title>
<meta name="keywords" content="关小曼,小可爱,小蠢货">
<meta name="description" content="关小曼,我爱你,请原谅我的坦白,只有在你的微笑里，我才有呼吸，我才活得有朝气,你的一眸一笑，刻画在我心扉,我为你疯狂，为你着迷，我想住进你的心里,感情上的事情，常常说不明白,不是不想爱，不是不去爱,怕只怕，爱也是一种伤害，爱我，你敢吗？">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/polaroid-gallery.css"/>
	<!--[if IE]> <script src="http://libs.baidu.com/html5shiv/3.7/html5shiv.min.js"></script> <![endif]-->
<style type="text/css"> body { 
      margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; background-color: #FF62FF; height: 100%; overflow: hidden; } .content { 
      width: 60%; color: #dd13ff; height: 100%; top: 20px; left: 10%; font-size: 18px; font-weight: bolder; line-height: 25px; font-family: "微软雅黑"; margin-top: 0px; background-color: transparent; } @media only screen and (min-width:320px) and (max-width:600px) { 
      .content { 
      width: 80%; color: #90F; height: 100%; top: 20px; left: 10%; font-size: 10px; line-height: 15px; } } body { 
      color: #FFF; padding: 10px; background: #FFF url(images/img/love.jpg) no-repeat fixed top center; height: 100%; overflow: hidden; z-index:999; } </style>
<script src="js/jquery-1.7.1.min.js" language="javascript" type="text/javascript"></script>
<script src="js/tao.js" language="javascript" type="text/javascript"></script>
<script> $(document).ready(function(e) { 
      /*禁止右键和隐藏鼠标*/ $("body").bind("contextmenu", function() { 
      return false; }); /*定义文字最底部显示到哪儿*/ var guangs=["　","|","　","|"]; var guangBiao="/"; var guangSub=0; var guang=setInterval("$.guang()",120); var subs=0; var string="关小曼 ██我爱你██请原谅我的坦白██只有在你的微笑里，我才有呼吸，我才活得有朝气██你的一眸一笑，刻画在我心扉██我为你疯狂，为你着迷，我想住进你的心里██就算全世界离开你，还有一个我来陪，怎么舍得让你受尽冷风吹██就算全世界在下雪，就算候鸟已南飞，还有我在这里，痴痴地等你归██我真的很在乎你，所以我才神经质，默默忍受那伤悲██偶尔耍脾气，不是我本意，其实心血滴██感情上的事情，常常说不明白██不是不想爱，不是不去爱██怕只怕，爱也是一种伤害，爱我，你敢吗？ —————BY ZYL "; $.intent=function(str){ 
      str="　　"+str; //var reg=new RegExp("/█{1,2}/","i"); //创建正则RegExp对象 str=str.replace(eval("/█/gi"),"█"); return str; } string=$.intent(string); var echo=setInterval("$.echo()",300); $.guang=function(){ 
      if(guangSub<guangs.length-1){ 
      guangSub++; }else{ 
      guangSub=0; } guangBiao=guangs[guangSub]; $("#guang").html(guangBiao); } $.echo=function(){ 
      if(subs<string.length){ 
      $("#txt").html($("#txt").html()+$.repl(string.substr(subs,1))); if($("#guang").offset().top > document.body.scrollHeight){ 
      window.scrollTo(0,$("#guang").offset().top); } $(".des").css("bottom","0px"); subs++; } } $.repl=function(str){ 
      str=str.replace("\r\n","<br/>"); str=str.replace("\n","<br/>"); str=str.replace("█","<br/>"); return str; } }); </script>
</head>
<body>
<script type="text/javascript"> //<!CDATA[ var bodyBgs = []; bodyBgs[0] = "loveme.mp3"; bodyBgs[1] = "loveme.mp3"; bodyBgs[2] = "loveme.mp3"; var randomBgIndex = Math.round( Math.random() * 2 ); document.write('<audio src='+bodyBgs[randomBgIndex]+' autoplay=\'autoplay\'></audio>'); //]]> </script>
<!--下面是浮动的桃心-->
  <SCRIPT LANGUAGE="JavaScript"> //图片的过程中，横坐标的轨迹是以一点为中心的正弦曲线 //利用了setTimeout函数完成了动画的功能 //图片 var snowsrc="img/1.png" //雪花个数 var no = 15; //声明变量，xp表示横坐标，yp表示纵坐标> var dx, xp, yp; //声明变量，am表示左右摆动的幅度，stx表示横坐标的偏移步长，sty表示纵坐标的步长> var am, stx, sty; { 
      //获取当前窗口的宽度 clientWidth = document.body.clientWidth; //获取当前窗口的高度 clientHeight = document.body.clientHeight; } var dx = new Array(); var xp = new Array(); var yp = new Array(); var am = new Array(); var stx = new Array(); var sty = new Array(); var snowFlakes = new Array(); for (i = 0; i < no; ++ i) { 
      dx[i] = 0; //第i个图片的横坐标初始值 xp[i] = Math.random()*(clientWidth-50); yp[i] = Math.random()*clientHeight;//第i个图片的纵坐标初始值 am[i] = Math.random()*20; //第i个图片的左右摆动的幅度 stx[i] = 0.02 + Math.random()/10; //第i个图片y方向的步长 sty[i] = 0.7 + Math.random(); //第i个图片y方向的步长 //生成一个容纳雪花图片的div，并设置其绝对坐标 var snowFlakeDiv = document.createElement('div'); snowFlakeDiv.setAttribute('id', 'dot'+ i); snowFlakeDiv.style.position = 'absolute'; snowFlakeDiv.style.top = 15; snowFlakeDiv.style.left = 15; //生成一个雪花图片对象，设置宽高，并加入div var snowFlakeImg = document.createElement('img'); snowFlakeImg.setAttribute('src', snowsrc); snowFlakeImg.style.width = 195; snowFlakeImg.style.height = 195; //将雪花div加入到document中，并通过数组保存 snowFlakeDiv.appendChild(snowFlakeImg); document.body.appendChild(snowFlakeDiv); snowFlakes[i] = snowFlakeDiv; } function snow() { 
      for (i = 0; i < no; ++ i) { 
      //第i个图片的纵坐标加上步长 yp[i] += sty[i]; //如果新坐标超过了屏幕下沿，重置该图片的信息，包括横坐标、纵坐标以及x方向的步长和y方向的步长 if (yp[i] > clientHeight-50) { 
      //重新赋值图片的横坐标 xp[i] = Math.random()*(clientWidth-am[i]-30); //重新赋值图片的纵坐标 yp[i] = 0; } dx[i] += stx[i];//dx变量加上一个步长 //直接操作数组中对应的雪花div var snowFlakeDiv = snowFlakes[i]; //更新图片的纵坐标 snowFlakeDiv.style.top = yp[i]; //更新图片的横坐标 snowFlakeDiv.style.left = xp[i] + am[i]*Math.sin(dx[i]); } //设定动画刷新的时间周期 setTimeout("snow()", 10); } //调用snowIE()函数  snow(); </script>
<!---->
<center>
<div align="left" class="content"><span id="txt"></span><span id="guang"></span>
<span></span>
</div>
</center>


<div id="gallery" class="fullscreen"></div>
	<div id="nav" class="navbar" style="display:none;">
        <button id="preview">&lt; 前一张</button>
	    <button id="next">百变一下</button>
	</div>
</body>
<script type="text/javascript" src="js/polaroid-gallery.js"></script>
	<script> //$(document).ready(function(){ 
      window.onload = function () { 
      new polaroidGallery("data/data.json"); //alert(new polaroidGallery("data/data.json").value); }; </script>
 <script type="text/javascript"> var msg = document.title; var titAn = function() { 
      msg = msg.substring(1,msg.length)+ msg.substring(0,1); document.title = msg; }; if (msg.length > 10) { 
      setInterval(function () { 
      titAn() }, 500); } </script>
<script type="text/javascript"> // 两秒后模拟点击 setInterval(function () { 
     $('#next').click(); },1200); </script>
</html>

2.CSS代码


body { 
   
    background-color: #F2EBE2;
}

.fullscreen { 
   
    width: 100%;
    height: 100%;
    overflow: hidden;
    margin-top:-48%;
    padding: 0;
	text-align: center;
	z-index:-99999 !important;
}
@media only screen and (min-width:320px) and (max-width:600px) { 
   
	.fullscreen { 
   
    width: 100%;
    height: 60%;
    overflow: hidden;
    margin-top: -180%;
    padding: 0;
	text-align: center;
	z-index:-99999 !important;
}
	figure img { 
   
    height: auto;
    max-width: 32%;
    margin: 0 auto;
    margin-bottom: 100px;
}
	.navbar { 
   
    position: fixed;
    bottom: 180px;
    width: 100%;
    text-align: center;
	z-index:999;
}
		}

figure { 
   
    width: 200px;
    position: absolute;
    padding: 10px;
    margin: 0 auto;
    text-align: center;
    background-color: white;
    -webkit-transition: all 0.6s;
    -moz-transition: all 0.6s;
    transition: all 0.6s;
    cursor: pointer;
	z-index:-99999 !important;
}

figure img { 
   
    height: auto;
    max-width: 100%;
    margin: 0 auto;
    margin-bottom: 15px;
}

figure figcaption { 
   
    font-family: Comic Sans, Comic Sans MS, cursive;
    color: #8F8476;
	z-index:-99999 !important;
}

.navbar { 
   
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px;
    text-align: center;
	z-index:999;
}

button { 
   
    background-color: transparent;
    padding: 10px 24px;
    color: #ffffff;
    border: 2px solid white;
	background-color: #6AEC5B;
    -webkit-transition-duration: 0.4s;
    transition-duration: 0.4s;
    transition: 0.4s;
}

button:hover { 
   
    background-color: #f44336;
    color: white;
}

三、精彩专栏

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

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/35597.html

HTML5七夕情人节表白网页制作【一生守护】HTML+CSS+JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

发表回复

HTML5七夕情人节表白网页制作【一生守护】HTML+CSS+JavaScript

文章目录

一、网页介绍

一、网页效果

二、代码展示

1.HTML代码

2.CSS代码

三、精彩专栏

相关推荐

发表回复