HTML5七夕情人节表白网页制作【我喜欢你H5】HTML+CSS+JavaScript |
您所在的位置：网站首页 › html5表白网页在线生成 › HTML5七夕情人节表白网页制作【我喜欢你H5】HTML+CSS+JavaScript |
HTML5七夕情人节表白网页制作【我喜欢你H5】HTML+CSS+JavaScript
|
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。 文章目录 一、网页介绍一、网页效果二、代码展示1.HTML代码2.CSS代码 三、精彩专栏 一、网页介绍1 网页简介：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用 2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。 一、网页效果
代码如下（示例）：以下仅展示部分代码供参考~ DOCTYPE html> 新婚快乐❤️ //判断客户端设备，选择写入meta function 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(''); }else{ document.write(''); } }else if(navigator.userAgent.indexOf('iPhone') != -1){ var phoneScale = parseInt(window.screen.width)/500; document.write(' '); //0.75 0.82 }else{ document.write(' '); //0.75 0.82 } } init_viewport(); * { 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; } 誓言;;❤ 祝福;;✖ 请查看若思相对你们说的心里话 ✖ 太好了！哈哈~ 语音 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":"\u9047\u89c1\u4f60\u662f\u6211\u6240\u6709\u7f8e\u597d\u6545\u4e8b\u7684\u5f00\u59cb\uff0c\u6240\u4ee5\uff0c\u8bf7\u522b\u653e\u5f00\u6211\u7684\u624b\uff0c\u4e5f\u522b\u7f3a\u5e2d\u6211\u7684\u5c06\u6765\uff0c\u56e0\u4e3a\u4e00\u8f88\u5b50\u548c\u4f60\u5728\u4e00\u8d77\u624d\u53eb\u5c06\u6765\ud83d\udc95","typed_bool":"typed_y","cursor_char":"cursor_heart","bg_style_pure_words":"bg_opacity","bg_img":"3.jpg","simple_page_content":"","video_page_content":""}; console.log(theme_content); var music_json={"music_select":"m_online","m_online_id":"7","m_online_url":"http://music.163.com/song/media/outer/url?id=1396568325.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":1581680313,"nonceStr":"sCOFuLAhrZrcoo8t","url":"http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdnn2pi","signature":"dcd2bceecb6173f8962220309bf9b36229ff7236","rawString":"jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VHINcjHJVwMsFjJyfreRy7Cirs1niLvtMUWlkXLIkXzDjXhEIIg2D4CYYPfKu6MV8w&noncestr=sCOFuLAhrZrcoo8t×tamp=1581680313&url=http:\/\/www.makusi.cn\/Home\/Play\/play_show\/ws\/YGdnn2pi"}; 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() if(typed_bool){ console.log(pure_words_content,'pure_words_contentpure_words_content') var typed_pure_words = new Typed('#span_pw_typed', { strings: ['我的姐姐和姐夫，在未来你们冷暖有相知，喜忧有分享；天长地久，相濡以沫'], //输入内容, 支持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('我的姐姐和姐夫，在未来你们冷暖有相知，喜忧有分享；天长地久，相濡以沫').fadeIn(); } init_attachment(); } function random_text_array(temp_array,length){ //获取随机的模板文字 console.log('random_text_array'); var random_array=[]; while(random_array.length random_array.push(random_num); } } // console.log(random_array); for(var i=0; i var start_content={"chase_title":"\u505a\u6211\u5973\u670b\u53cb\u597d\u4e0d\u597d\ud83d\udc95","chase_text":"\u627f\u8499\u4f60\u7684\u51fa\u73b0\uff0c\u591f\u6211\u559c\u6b22\u597d\u591a\u5e74\uff0c\u6211\u5e0c\u671b\uff0c\u4ee5\u540e\u4f60\u80fd\u7528\u6211\u7684\u540d\u5b57\u62d2\u7edd\u6240\u6709\u4eba\ud83d\udc95","chase_benefit":["\u4f60\u662f\u6211\u62d4\u6389\u6c27\u6c14\u7f50\u90fd\u60f3\u543b\u7684\u4eba","\u4f60\u662f\u6211\u8dd1\u5b8c8000\u7c73\u8fd8\u60f3\u62e5\u62b1\u7684\u4eba","\u4f60\u662f\u6211\u81ea\u7f5a\u4e09\u676f\u90fd\u4e0d\u80af\u5f00\u53e3\u7684\u79d8\u5bc6","\u4f60\u662f\u6211\u8d74\u6c64\u8e48\u706b\u90fd\u4e0d\u80af\u653e\u4e0b\u7684\u6267\u7740","\u4f60\u662f\u6211\u7535\u91cf\u53ea\u52691%\u4e5f\u60f3\u56de\u4fe1\u606f\u7684\u4eba","\u4f60\u662f\u6211\u7a77\u6781\u4e00\u751f\u4e0d\u60f3\u9192\u6765\u7684\u68a6"],"bg_style":"bg_custom","bg_img":"2.jpg","img_bool":"img_true","img_src":"1.gif"}; //可能为null console.log(start_content); var start_id; $(function(){ //此事件为触发互动创意 start_id='onlyyou'; //可能为null init_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(); } var attachment='null'; //可能为null var attached_content={"bool_save":false}; //可能为null console.log(attached_content); function init_attachment(){ //开始attachment console.log('init_attachment ->'+attachment); switch(attachment){ case 'timer': init_at_timer(); break; default: return; } } 2.CSS代码 #div_onlyyou { position:relative; width: 100%; z-index:666; background-size: 100%; background-repeat: repeat; display: none; } #div_oy_inner { position:absolute; top: 0;right: 0;left: 0;bottom: 0; width: 100%; min-height:400px; padding: 12% 10% 0% 10%; background: rgba(255,255,255,.8); text-align: center; } .div_oy_text { font-weight: 300; text-align: left; font-size: 1.1em; margin: 0px auto 60px auto; } .div_oy_text h1 { font-size: 1.8em; margin: 14px 0; } .div_oy_text p { margin: 14px 0; } .div_oy_text img { width: 100%; border-radius: 5px; } #ul_oy_benefit li { display: none; margin: 14px 0; } #ul_oy_benefit, #ul_oy_btn { list-style: none; } #ul_oy_btn li { background-color: rgba(0,0,0,0.6); display: inline; margin: 20px 40px; padding: 10px 15px; font-size: 1.4em; border: 1px solid white; border-radius: 5px; color: white; } #div_oy_note, #div_oy_yes { position: relative; margin: -60px auto; padding: 5% 0; width: 100%; height: 180px; text-align: center; background-color: white; border-radius: 5px; display: none; color: gray; font-size: 1.4em; } #div_oy_note_close { width: 40px; height: 40px; position: absolute; right: 20px; top: 20px; } 三、精彩专栏看到这里了就 【点赞，好评，收藏】 三连 支持下吧，你的支持是我创作的动力。—— |
【本文地址】
今日新闻 |
推荐新闻 |