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

文章目录

一、网页介绍
一、网页效果
二、代码展示
- 1.HTML代码
- 2.CSS代码
三、精彩专栏

一、网页介绍

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

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

一、网页效果

二、代码展示

1.HTML代码

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

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>2020年跨年快乐❤️</title><script>//判断客户端设备，选择写入metafunction init_viewport(){if(navigator.userAgent.indexOf('Android') != -1){var version = parseFloat(RegExp.$1);if(version>2.3){var width = window.outerWidth == 0 ? window.screen.width : window.outerWidth;var phoneScale = parseInt(width)/500;document.write('<meta name="viewport" content="width=500, minimum-scale = '+ phoneScale +', maximum-scale = '+ phoneScale +', target-densitydpi=device-dpi">');}else{document.write('<meta name="viewport" content="width=500, target-densitydpi=device-dpi, user-scalable=0">');}}else if(navigator.userAgent.indexOf('iPhone') != -1){var phoneScale = parseInt(window.screen.width)/500;document.write('<meta name="viewport" content="width=500, min-height=750, initial-scale=' + phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> ');         //0.75   0.82}else{document.write('<meta name="viewport" content="width=500, height=750, initial-scale=0.64" /> '); //0.75  0.82}}init_viewport();</script> <style>* {padding: 0px;margin: 0px;-webkit-box-sizing: border-box;} body {background-color: white;}a {color: white;text-decoration: none; }#div_container { /*最外层div，用于居中兼容PC和移动*/width: 500px;margin: 0px auto; position: relative; /*background-color: #FAFAFA;*/font-size: 1em;}.div_pure_words { /*文字部分的最外层，用于定位*/position: relative;display: none;}.div_pure_words_bg { /*背景设置在这里*/background-repeat: repeat; background-size: 100%; background-attachment: fixed; width: 500px;min-height: 500px; }.div_pure_words_height {visibility: hidden;padding: 30px; text-align: justify;  /*为了使文字两端对齐 */white-space: pre-wrap; /*保留换行效果*/font-size: 1.1em;font-family: "Microsoft YaHei","Arial";color: white; }.div_pw_typed {position: absolute;left: 0;right: 0;  /*4个方向定位使div充满整个画画*/top: 0;bottom: 0;  /*4个方向定位使div充满整个画画*/width: 500px;            background:rgba(255,255,255,0.8); /*半透明效果*/padding: 30px; text-align: justify;  /*为了使文字两端对齐 */} #span_pw_typed {width:100%; /*为了使文字两端对齐 */ white-space:pre-wrap; /*保留换行效果*/ font-size: 1.1em;font-family: "Microsoft YaHei","Arial";}#div_start_bg{width: 100%; height: 100%;position: absolute;left: 0px; top: 0px;z-index: 44;background-color: white;}</style><!-- 按钮部分的样式 --><link type="text/css" rel="stylesheet" href="css/theme_public_btn.css"><!-- 按需加载，选择此片头时方才加载 --><link type="text/css" rel="stylesheet" href="css/start_intersect.css">  </head><body><div id="div_container"> <!-- 最外层div，用于居中兼容PC和移动 --> <div id="div_start_bg"></div> <!-- 用于遮挡主题，作为片头的背景 --><!-- 按需加载，选择此片头时方才加载 --><!-- 按需加载，选择此片头时方才加载 --><div id="div_intersect"><!-- 用于设置背景 --><div id="div_is_inner"><!-- 用于存放content --><div class="div_is_open_bg"><div class="div_is_open_btn" onclick="init_is_typed()"></div></div><!-- 画布在这里 --><canvas id="canvas_is"></canvas> <!-- 打字在这里 --><div class="div_is_typed"> <div id="div_is_img">  <img class="img_is_typed"></div><span id="span_is_typed"></span> </div>  </div></div><!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 --><!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 --><!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 --><!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 --><!-- 以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头  以上是动画和视频片头 --><div class="div_pure_words"> <!-- 文字部分的最外层，用于定位 --><div class="div_pure_words_bg"><!-- 背景设置在这里 --><div class="div_pure_words_height"> <!-- 正文的内容复制到这里面，撑开整个文档的高度 --></div></div> <div class="div_pw_typed"> <!-- 正文部分，绝对定位 --> <span id="span_pw_typed"></span></div> </div><div id='div_btn_container'> <!-- 按钮部分的最外层，处于文档流之中 --><div id="div_btn_inner"> <!-- 按钮部分内层，用于定位 --><div class='div_music_tips'></div><div class="div_btn" id="div_music" onclick="music_switch()"> <!-- 音乐按钮部分 --><img id='img_music' src='/images/music_note_big.png' style='-webkit-animation:music_play_rotate 1s linear infinite'> <audio id="audio_music" autoplay="autoplay" loop="loop"><source type="audio/mpeg"/>  <!-- 您的浏览器不支持播放音乐 --></audio></div><div class='div_record_tips'></div><div class="div_btn" id="div_record" onclick="record_switch()"> <!-- 录音按钮部分 -->语音<audio id="audio_record" loop="loop"><source type="audio/mpeg"/>  <!-- 您的浏览器不支持播放音乐 --></audio></div><!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 --><div class="div_btn" id='div_support'><a href="https://www.gwents.com/tag/%e8%a1%a8%e7%99%bd%e6%ba%90%e7%a0%81"><span>更多</span></a></div>  <!-- 只在提交状态显示 只在提交状态显示 只在提交状态显示 只在提交状态显示 --><!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 --><!-- 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 只在未提交状态显示 --></div> </div></div><script src="js/jquery-2.0.3.min.js"></script><script src="js/typed.min.js"></script><script src="js/support_upload_as.js"></script><script src="js/jweixin-1.2.0.js"></script><script>var window_height=$(window).height();console.log('window_height ->'+window_height);var theme='pure_words';console.log('theme ->'+theme);var theme_content={"pure_words_content":"\u4e16\u754c\u8fd9\u4e48\u5927\u2764\ufe0f\r\n\u800c\u6211\u771f\u6b63\u60f3\u843d\u811a\u7684\u5730\u65b9\u662f\u4f60\u7684\u8eab\u65c1\r\n\r\n\u5982\u679c\u4f60\u662f\u4e09\u90a3\u6211\u4e00\u5b9a\u662f\u4e5d\u2764\ufe0f\r\n\u4f60\u77e5\u9053\u4e3a\u4ec0\u4e48\u5417?\u56e0\u4e3a\u6211\u9664\u4e86\u4f60\u8fd8\u662f\u4f60\u2764\ufe0f\r\n","typed_bool":"typed_y","cursor_char":"cursor_heart","bg_style_pure_words":"bg_opacity","bg_img":"13.jpg","simple_page_content":"","video_page_content":""};console.log(theme_content);var music_json={"music_select":"m_online","m_online_id":"6","m_online_url":"http://music.163.com/song/media/outer/url?id=1412430003.mp3","m_upload_name":"null","m_upload_url":"null"};console.log(music_json);var record_json={"record_bool":"r_false","r_wechat_time":"null","r_wechat_url":"null","r_wechat_amr":"null"};console.log(record_json);var signPackage={"appid":"wx47f716bdd7699533","timestamp":1577533642,"nonceStr":"4uf5JH8gLZx2oSYN","url":"http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdml21m","signature":"26b52c017a5dad1cfaa527b16f32ad6cd7fca23a","rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VHINcjHJVwMsFjJyfreRy7AXf4KYX5l3Aku_9253FlC9OXF1HGSZbw6z2aOD5ti-qQ&noncestr=4uf5JH8gLZx2oSYN&timestamp=1577533642&url=http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdml21m"};var main_title='2020年跨年快乐❤️';// console.log(main_title);if(main_title=='' || main_title=='null'){  //允许标题为空document.title='慢慢喜欢你';} // console.log(""); var pure_words_content=theme_content['pure_words_content'];var str_cursorChar; var typed_bool;var interval_pw_height;var height_div_pw=$(".div_pure_words_height").height();function init_pure_words(){//允许内容为空时直接展示，不设置为随机内容，用于空主题if(typeof(pure_words_content)=='undefined'){ //处理全新作品var array_str_temp=[];random_text_array(array_str_temp,12); //获取随机的模板文字// array_str_temp.push('你现在看到的只是案例，文字是可以自定义哒，6000字以下');pure_words_content=array_str_temp.join('\r\r');}$(".div_pure_words_height").html(pure_words_content+'22222');  //初始化复制内容，撑开文档高度            // 初始化设置div的bg图片 初始化设置div的bg图片if(typeof(theme_content['bg_style_pure_words'])!='undefined' && theme_content['bg_style_pure_words']=='bg_opacity'){if(typeof(theme_content['bg_img'])!='undefined' && theme_content['bg_img']!=''){                    $(".div_pure_words_bg").css({"background-image": "url("+theme_content['bg_img']+")"});}} //以下是打字效果的js if(typeof(theme_content['cursor_char'])!='undefined' && theme_content['cursor_char']!=''){switch(theme_content['cursor_char']){ //设置打字光标的样式case 'cursor_heart':str_cursorChar='❤';break;case 'cursor_sub':str_cursorChar='_';break;case 'cursor_music':str_cursorChar='♫';break;case 'cursor_star':str_cursorChar='★';break;case 'cursor_sun':str_cursorChar='☀';break;default:str_cursorChar='|';}}else{ //处理全新作品，默认显示打字效果str_cursorChar='❤';}//判断用户有没有选择打字效果if(typeof(theme_content['typed_bool'])!='undefined' && theme_content['typed_bool']!=''){typed_bool= theme_content['typed_bool']=='typed_y' ? true : false;                  }else{typed_bool=false; //默认显示打字效果} // console.log(typed_bool);display_pure_words(); $(".div_pure_words").fadeIn();interval_pw_height=setInterval(function(){console.log('div_pure_words_height -> '+$('.div_pure_words_height').height());var least_height_div_pw=$('.div_pure_words_height').height();if(least_height_div_pw>height_div_pw){height_div_pw=least_height_div_pw;}else{clearInterval(interval_pw_height);$(".div_pure_words_height").height(least_height_div_pw+100);if($(".div_pure_words_height").height()<window_height){$(".div_pure_words_height").height(window_height); //不能小于窗口的高度console.log('let us be high as window');} }},100);}function display_pure_words(){if(typed_bool){ var typed_pure_words = new Typed('#span_pw_typed', {strings: [pure_words_content], //输入内容, 支持html标签typeSpeed: 120, //打字速度cursorChar: str_cursorChar,//替换光标的样式contentType: 'html', //值为html时，将打印的文本标签直接解析html标签onComplete: function(abc){// console.log(abc); console.log('finished typing words'); // console.log($('#span_pw_typed').height()-$(".div_pure_words_height").height());},});}else{//如果不需要打字效果就直接显示$("#span_pw_typed").html(pure_words_content).fadeIn(); }init_attachment();} function random_text_array(temp_array,length){  //获取随机的模板文字console.log('random_text_array');var random_array=[];while(random_array.length<length){// var random_num=Math.floor(Math.random()*(array_as_pics.length-0))+0;var random_num=Math.floor(Math.random()*(array_as_words_love.length)); //随机取值 if(random_array.indexOf(random_num)==-1){random_array.push(random_num);}}// console.log(random_array);for(var i=0; i<length; i++){  temp_array.push(array_as_words_love[random_array[i]]); //获取随机的模板文字}}         </script><!-- 按需加载，选择此片头时方才加载 --><script> var start_content={"hearttree_text":"\u5c0f\u751f\u4e0d\u624d\r\n\u4ef0\u6155\u59d1\u5a18\u5df2\u4e45\r\n\u6562\u95ee\u59d1\u5a18\u5fc3\u7cfb\u8c01\u5bb6\uff1f\r\n\u5018\u82e5\u59d1\u5a18\u4e0d\u5f03\r\n\u5c0f\u751f\u613f\u6276\u59d1\u5a18\u4e0a\u90a3\u82b1\u8f7f\r\n\u5165\u6211\u5bb6\u95e8\r\n\u4f59\u751f\u643a\u59d1\u5a18\u770b\u90a3\u671d\u9633\u8d77\r\n\u5750\u66ae\u843d\r\n\u770b\u90a3\u96c1\u5357\u98de\uff0c\u6708\u4e0b\u9152\u5bf9\u996e\r\n\u5c82\u4e0d\u5feb\u54c9\uff1f\ud83d\ude02\ud83d\ude02 _","hearttree_desc":"\u2764\ufe0f\u2764\ufe0f","hearttree_time":"2019-12-18","hearttree_time_type":"hearttree_postive","bg_img":"13.jpg","img_src":"13.gif","intersect_text":"\u5f80\u4e8b\u6e05\u96f6\u7231\u6068\u968f\u610f\uff0c2020\u5e0c\u671b\u4f60\u6d3b\u7684\u5f00\u5fc3\uff0c\u4e0d\u7528\u56de\u5934\u4e0d\u518d\u5c06\u5c31\uff0c\u8fc7\u53bb\u6240\u6709\u7684\u9057\u61be\u90fd\u662f2020\u7684\u60ca\u559c\uff0c\u9047\u89c1\u4f60\u90fd\u662f\u5929\u610f\uff0c\u62e5\u6709\u4f60\u90fd\u662f\u5e78\u8fd02020\uff0c\u613f\u81ea\u5df1\u6709\u80fd\u529b\u7231\u4f60\u2764\ufe0f","cursor_char":"cursor_heart","bg_style":"bg_custom","img_bool":"img_true","courage_h1":"","courage_h2":"","courage_receiver":"","courage_text":["\u6700\u7f8e\u4e3d\u7684\u4e8b\uff0c\u83ab\u8fc7\u4e8e\u5728\u6700\u597d\u7684\u65f6\u5149\u9047\u89c1\u4f60\uff0c\u76f8\u4e92\u5acc\u5f03\uff0c\u5374\u53c8\u4e0d\u79bb\u4e0d\u5f03","\u4e0d\u662f\u56e0\u4e3a\u60f3\u604b\u7231\u624d\u9047\u89c1\u4f60\uff0c\u800c\u662f\u9047\u89c1\u4f60\u4e4b\u540e\u6211\u624d\u6709\u4e86\u604b\u7231\u7684\u60f3\u6cd5","\u6211\u77e5\u9053\u9047\u89c1\u4f60\u4e0d\u5bb9\u6613\uff0c\u9519\u8fc7\u4f1a\u5f88\u53ef\u60dc\uff0c\u6211\u4e0d\u5e0c\u671b\u4f59\u751f\u90fd\u662f\u56de\u5fc6\uff0c\u6211\u60f3\u4f59\u751f\u6bcf\u5929\u90fd\u662f\u4f60\uff0c\u6211\u7231\u4f60"]}; //可能为nullconsole.log(start_content); var start_id;$(function(){//此事件为触发互动创意start_id='intersect'; //可能为nullinit_start(start_id);});function init_start(start_id){ console.log('init_start ->'+start_id);switch(start_id){case 'loveformat':$('.div_loveformat').show();init_loveformat();break;case 'hearttree':$('#div_hearttree').show();init_hearttree();break;case 'courage':$('#div_courage').show();init_courage();break;case 'birthdaycake':$('#div_dbcake').show();init_birthdaycake();break;case 'intersect':$('#div_intersect').show();init_intersect();break;case 'onlyyou':$('#div_onlyyou').show();init_onlyyou();break;default:init_theme(); }} //开始动画主体部分function init_theme(){console.log('init_theme');$('#div_start_bg').fadeOut();init_pure_words();            }</script><!-- 按需加载，选择此片头时方才加载 --><script src="js/start_intersect.js"></script> <script> var attachment='null'; //可能为nullvar attached_content={"bool_save":false}; //可能为nullconsole.log(attached_content); function init_attachment(){  //开始attachmentconsole.log('init_attachment ->'+attachment);switch(attachment){case 'timer':init_at_timer();break;default:return; }} </script><script src='js/jweixin-1.2.0.js'></script><script src='js/theme_common.js'></script> <!-- 音乐控制和微信设置等公共部分js外部引入 --></body>
</html>

2.CSS代码

#div_btn_inner{ /*按钮部分内层，用于定位*/color:white; text-shadow:1px 1px 1px #000;            width: 500px;padding-left: 430px;}.div_btn {position: fixed;cursor: pointer;  width: 42px; height: 42px;border: 2px solid white;border-radius: 50%; font-size: 1em;line-height: 40px;text-align: center; z-index:999;} #div_music {border: none;top: 30px; }#div_record {top: 100px;background-color: rgba(0, 0, 0, 0.5);}#div_support{ top: 170px; background-color: rgba(0, 0, 0, 0.3);}        .div_music_tips{  position: fixed;top: 70px; z-index:999;}.div_record_tips{  position: fixed;top: 140px;z-index:999;}.div_btn_big {position: fixed;cursor: pointer; width: 52px; background-color: rgba(112,128,144, 0.6); border-radius: 5px; padding: 10px 0px;font-size: 1.1em;line-height: 1.3em;text-align: center; z-index:999;}#div_s_upload {top: 360px;}#div_s_sound {top: 440px;}#div_s_choose {top: 520px;}#div_s_qa {top: 600px;}@-webkit-keyframes music_play_rotate{0%{-webkit-transform:rotate(0deg);}100%{-webkit-transform:rotate(360deg);}}@-webkit-keyframes btn_rotate{ /*帮助按钮的动画*/0%  {-webkit-transform:rotate(0deg);}40% {-webkit-transform:rotate(0deg);}50% {-webkit-transform:rotate(30deg);}60% {-webkit-transform:rotate(0deg);}70% {-webkit-transform:rotate(30deg);}80% {-webkit-transform:rotate(0deg);}100% {-webkit-transform:rotate(0deg);}}

三、精彩专栏

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

HTML5七夕情人节表白网页制作【一起跨年表白代码】HTML+CSS+JavaScript相关推荐

HTML5七夕情人节表白网页制作——蓝色梦幻海洋3D相册—— HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作❤蓝色梦幻海洋3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
HTML5七夕情人节表白网页制作 (渐变色满天星空3D相册) HTML+CSS+JavaScript
HTML5七夕情人节表白网页制作 ❤渐变色满天星空3D相册❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看 ...
HTML5七夕情人节表白网页制作【幻化3D相册】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作【圣诞雪花飘落】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页(爱心雨-满屏爱心飘落)HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤(爱心雨-满屏爱心飘落)❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript
HTML5七夕情人节表白网页❤ 浪漫的樱花雨3D相册 ❤ HTML+CSS+JavaScript 这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此 ...
HTML5期末大作业：美食网页制作——餐饮料里(12页) HTML+CSS+JavaScript 大学生简单个人静态HTML网页设计作品 DIV布局个人介绍网页模板代码 DW学生个人网站制作成品下载
HTML5期末大作业:美食网页制作--餐饮料里(12页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计计算机毕设网页设计源码常见网页设计作业题材有 ...
一行代码教你七夕情人节如何告白❤—动漫3D相册(音乐+文字)HTML+CSS+JavaScript
❤ 一行代码教你七夕情人节如何告白-动漫3D相册(音乐+文字)HTML+CSS+JavaScript 七夕是中国的情人节,七夕520情人节也是一个非常适合表白的日子,可以把自己平常害怕说出来的话,在这 ...
HTML5七夕情人节表白网页制作【css3爱心表白背景特效】HTML+CSS+JavaScript 520情人节代码制作
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...
HTML5七夕情人节表白网页制作【一箭穿心动画css3代码】HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一,旨在让任何人都能使用并创建自己的表白网站给心爱的人看. 此波共有100个表白网站,可以任意修改和使用,很多人会希望向心爱的男孩女孩告白,生性腼腆的人即使那个 ...

HTML5七夕情人节表白网页制作【一起跨年表白代码】HTML+CSS+JavaScript