共计 11074 个字符，预计需要花费 28 分钟才能阅读完成。
这是程序员表白系列中的 100 款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。此波共有 100 个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个 TA 站在眼前都不敢向前表白。说不出口的话就用短视频告诉 TA 吧~ 制作一个表白网页告诉 TA 你的心意, 演示如下。
文章目录
- 一、网页介绍
- 一、网页效果
- 二、代码展示
- 三、精彩专栏
一、网页介绍
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>
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('+ phoneScale +', maximum-scale ='+ phoneScale +', target-densitydpi=device-dpi">');
}else{
document.write('');
}
}else if(navigator.userAgent.indexOf('iPhone') != -1){
var phoneScale = parseInt(window.screen.width)/500;
document.write('+ phoneScale +', maximum-scale='+phoneScale+', user-scalable=0" /> ');
}else{
document.write('');
}
}
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 {
width: 500px;
margin: 0px auto;
position: relative;
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;
top: 0;
bottom: 0;
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_onlyyou.css">
head>
body>
div id="div_container">
div id="div_start_bg">div>
div id="div_onlyyou">
div id="div_oy_inner">
div class="div_oy_text">
h1>h1>
img class="img_oy_text" src="">
p class="p_oy_text">p>
ul id="ul_oy_benefit">
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
li class="li_oy_benefit">li>
ul>
div>
ul id="ul_oy_btn">
li onclick="oy_go_next()">誓言 ❤li>
li onclick="oy_show_benefit()">祝福 ✖li>
ul>
div id="div_oy_note" onclick="oy_hide_note()">
img src="images/emoji_kelian.jpg" alt="">br>
请查看若思相对你们说的心里话
div id="div_oy_note_close">✖div>
div>
div id="div_oy_yes">
img src="images/emoji_bixin.jpg" alt="">br>
太好了！哈哈~
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" src="./01.mp3" 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'>
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":"u9047u89c1u4f60u662fu6211u6240u6709u7f8eu597du6545u4e8bu7684u5f00u59cbuff0cu6240u4ee5uff0cu8bf7u522bu653eu5f00u6211u7684u624buff0cu4e5fu522bu7f3au5e2du6211u7684u5c06u6765uff0cu56e0u4e3au4e00u8f88u5b50u548cu4f60u5728u4e00u8d77u624du53ebu5c06u6765ud83dudc95","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='我喜欢你❤️';
if(main_title=='' || main_title=='null'){
document.title='慢慢喜欢你';
}
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);
pure_words_content=array_str_temp.join('rr');
}
$(".div_pure_words_height").html(pure_words_content+'22222');
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']+")"});
}
}
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;
}
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){
console.log(pure_words_content,'pure_words_contentpure_words_content')
var typed_pure_words = new Typed('#span_pw_typed', {
strings: ['我的姐姐和姐夫，在未来你们冷暖有相知，喜忧有分享；天长地久，相濡以沫'],
typeSpeed: 120,
cursorChar: str_cursorChar,
contentType: 'html',
onComplete: function(abc){
console.log('finished typing words');
},
});
}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.lengthlength){
var random_num=Math.floor(Math.random()*(array_as_words_love.length));
if(random_array.indexOf(random_num)==-1){
random_array.push(random_num);
}
}
for(var i=0; ilength; i++){
temp_array.push(array_as_words_love[random_array[i]]);
}
}
script>
script>
var start_content={"chase_title":"u505au6211u5973u670bu53cbu597du4e0du597dud83dudc95","chase_text":"u627fu8499u4f60u7684u51fau73b0uff0cu591fu6211u559cu6b22u597du591au5e74uff0cu6211u5e0cu671buff0cu4ee5u540eu4f60u80fdu7528u6211u7684u540du5b57u62d2u7eddu6240u6709u4ebaud83dudc95","chase_benefit":["u4f60u662fu6211u62d4u6389u6c27u6c14u7f50u90fdu60f3u543bu7684u4eba","u4f60u662fu6211u8dd1u5b8c8000u7c73u8fd8u60f3u62e5u62b1u7684u4eba","u4f60u662fu6211u81eau7f5au4e09u676fu90fdu4e0du80afu5f00u53e3u7684u79d8u5bc6","u4f60u662fu6211u8d74u6c64u8e48u706bu90fdu4e0du80afu653eu4e0bu7684u6267u7740","u4f60u662fu6211u7535u91cfu53eau52691%u4e5fu60f3u56deu4fe1u606fu7684u4eba","u4f60u662fu6211u7a77u6781u4e00u751fu4e0du60f3u9192u6765u7684u68a6"],"bg_style":"bg_custom","bg_img":"2.jpg","img_bool":"img_true","img_src":"1.gif"};
console.log(start_content);
var start_id;
$(function(){
start_id='onlyyou';
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();
}
script>
script src="js/start_onlyyou.js">script>
script>
var attachment='null';
var attached_content={"bool_save":false};
console.log(attached_content);
function init_attachment(){
console.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_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;
}
三、精彩专栏
看到这里了就【点赞，关注，收藏】三连 支持下吧，你的支持是我创作的动力。
原文地址: HTML5 七夕情人节表白网页制作【我喜欢你 H5】HTML CSS JavaScript
正文完
