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

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

时间：2020-05-08 05:43:49

这是程序员表白系列中的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>跨年快乐❤️</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 id="div_start_bg"></div> <div id="div_intersect"><div id="div_is_inner"><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="/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":"/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:\/\/\/Home\/Play\/play_show\/ws\/YGdml21m","signature":"26b52c017a5dad1cfaa527b16f32ad6cd7fca23a","rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VHINcjHJVwMsFjJyfreRy7AXf4KYX5l3Aku_9253FlC9OXF1HGSZbw6z2aOD5ti-qQ&noncestr=4uf5JH8gLZx2oSYN&timestamp=1577533642&url=http:\/\/\/Home\/Play\/play_show\/ws\/YGdml21m"};var main_title='跨年快乐❤️';// 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":"-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\uff0c\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\u662f\u7684\u60ca\u559c\uff0c\u9047\u89c1\u4f60\u90fd\u662f\u5929\u610f\uff0c\u62e5\u6709\u4f60\u90fd\u662f\u5e78\u8fd0\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> </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);}}

三、精彩专栏

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。