这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，很多人会希望向心爱的男孩女孩告白，生性腼腆的人即使那个TA站在眼前都不敢向前表白。说不出口的话就用短视频告诉TA吧~制作一个表白网页告诉TA你的心意,演示如下。
@TOC
一、网页介绍
1 网页简介：基于 HTML CSS JavaScript 制作七夕情人节表白网页、生日祝福、七夕告白、 求婚、浪漫爱情3D相册、炫酷代码 ,快来制作一款高端的表白网页送(他/她)浪漫的告白,制作修改简单,可自行更换背景音乐,文字和图片即可使用
2.网页编辑：任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作）。
一、网页效果
在这里插入图片描述
在这里插入图片描述二、代码展示
1.HTML代码
代码如下（示例）：以下仅展示部分代码供参考~
代码语言：html复制<!DOCTYPE html>
<!-- http://1314-520.love/yanshi/005/ 演示地址 -->
<html>
<script src="js/clipboard.js"></script>
<script>
var clipboard = new ClipboardJS('.fuzhitkl');
clipboard.on('success', function(e) {
console.log(e);
});
clipboard.on('error', function(e) {
console.log(e);
});
</script>
<head>
<meta charset="utf-8">
<title>Start Love</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/base.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/main.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/venobox.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/fonts.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/ae168344b8194b348b667f19ac4d1956.css" rel="stylesheet">
</head>
<body>
<div class="loader">
<div class="loader-inner">
<svg width="120" height="220" viewbox="0 0 100 100" class="loading-spinner" version="1.1" xmlns="http://www.w3.org/2000/svg">
<circle class="spinner" cx="50" cy="50" r="21" fill="#ffffff" stroke-width="2"/>
</svg>
</div>
</div>
<div class="wrapper">
<section class="hero overlay">
<div class="background-img">
<img src="picture/17.jpg" alt="">
</div>
<header class="header default">
<div class=" left-part">
<a class="logo scroll" href="#hero">
<h2>LOVE</h2>
</a>
</div>
<div class="right-part">
<nav class="main-nav">
<div class="toggle-mobile-but">
<a href="#" class="mobile-but" >
<div class="lines"></div>
</a>
</div>
<ul>
<li><a class="scroll" href="#home">爱的首页</a></li>
<li><a class="scroll" href="#story">爱的故事</a></li>
<li><a class="scroll" href="#album">爱的相册</a></li>
</ul>
</nav>
</div>
</header>
<div class="inner-hero">
<div class="container hero-content">
<div class="row">
<div class="col-sm-12 text-center">
<h1 class="large mb-20">i love you</h1>
<div class="block-date-hero">
<div class="circle-dashed bg-n">
<div class="round-circle">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50" />
</svg>
<i class="icon-heart"></i>
</div>
</div>
<ul>
<li>陈雪</li>
<li>周广腾</li>
</ul>
</div>
<p class="mt-20 lead"></p>
</div>
</div>
</div>
</div>
</section>
<section id="story" class="story pt-120 pb-120">
<path class="dashed-line" stroke-width="1" d="M30 0 v600 400"/>
</svg>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center mb-100">
<h1 class="title">Our love story</h1>
<p>The Story of our love</p>
</div>
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4 col-sm-8 col-sm-offset-2 text-center mb-30">
<h2 class="heavy">这就是我们的爱情故事<br><span>同一个愿望,相爱.我爱你,至死不渝</span></h2>
</div>
</div>
<div class="row story-row mt-100 mb-100">
<div class="circle-dashed timeline bg">
<div class="round-circle bg before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"/>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>我们的相遇是意外的，但这是一个美丽幸福的意外，让我遇到了这么好的你</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>莎士比亚说过：爱情是一种甜蜜的痛苦，但是我愿意忍受这种痛苦，莎士比亚还说过，世界上没有比服侍爱情更快乐的了，你愿不愿意享受这种快乐？当然你是愿意的~嘿嘿</p>
</div>
</div>
</div>
<div class="row story-row mt-100 mb-80 ">
<div class="circle-dashed timeline bg green">
<div class="round-circle green before">
<svg viewBox="0 0 103 103" version="1.1" xmlns="http://www.w3.org/2000/svg" class="dashed-border">
<circle cx="50%" cy="50%" r="50"/>
</svg>
<i class="icon-heart"></i>
</div>
</div>
<div class="col-sm-5 ">
<div class="couple-story text-right">
<p>之前我不相信一见钟情，但是见到你的那一刻，我否定了我的看法。我的心为你沦陷，从此只为你跳动</p>
</div>
</div>
<div class="col-sm-5 col-sm-offset-2">
<div class="couple-story">
<p>有一种爱的感觉，叫感同身受。有一种爱的默契，叫心有灵犀。有一种爱的承诺，叫天长地久</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center mt-100">
<a href="#" class="but">
<span>Home</span>
<svg class="but-svg" width="175" height="50" viewBox="0 0 415 120" xmlns="http://www.w3.org/2000/svg">
<rect class="but-rect" x="10" y="10" width="400" height="100" rx="6" ry="6"/>
</svg>
</a>
</div>
</div>
</div>
</section>
<section class="date pt-150 pb-150 overlay">
<div class="background-img">
<img src="picture/4.jpg" alt="">
</div>
<div class="container">
<div class="row">
<h2 class="indent">Wedding date</h2>
<div class="col-sm-12 text-center">
<div class="block-content front-p">
<h2 class="typo">Save the date</h2>
<span id="elapseClock" class="text-white" style="font-size: 45px;font-weight: 300;">days <span class="digit">20</span> hours <span class="digit">14</span> minutes <span class="digit">00</span> seconds</span>
</div>
</div>
</div>
</div>
</section>
<section id="album" class="album bg-grey pt-120 pb-120">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center mb-100">
<h1 class="title">爱的相册</h1>
<p>Main ceremony - Wedding party</p>
</div>
</div>
<div class="row mb-30">
<h2 class="indent">Photo album</h2>
<div class="col-md-4 col-sm-4 col-xs-12 " style="margin-top: 20px;">
<div class="block-img">
<a href="http://img.zxgnz.com/images/20190804/156490542579422.jpg" class="venobox">
<div class="background-img">
<img alt="" src="picture/156490542579422.jpg">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 " style="margin-top: 20px;">
<div class="block-img">
<a href="http://img.zxgnz.com/images/20190804/156490542731052.jpg" class="venobox">
<div class="background-img">
<img alt="" src="picture/156490542731052.jpg">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 " style="margin-top: 20px;">
<div class="block-img">
<a href="http://img.zxgnz.com/images/20190804/156490543096270.jpg" class="venobox">
<div class="background-img">
<img alt="" src="picture/156490543096270.jpg">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12" style="margin-top: 20px;">
<div class="block-img">
<a href="http://img.zxgnz.com/images/20190804/156490543257636.jpg" class="venobox">
<div class="background-img">
<img alt="" src="picture/156490543257636.jpg">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 " style="margin-top: 20px;">
<div class="block-img">
<a href="http://img.zxgnz.com/images/20190804/156490543485467.jpg" class="venobox">
<div class="background-img">
<img alt="" src="picture/156490543485467.jpg">
</div>
</a>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-12 " style="margin-top: 20px;">
<div class="block-img">
<a href="http://img.zxgnz.com/images/20190804/156490543662231.jpg" class="venobox">
<div class="background-img">
<img alt="" src="picture/156490543662231.jpg">
</div>
</a>
</div>
</div>
</div>
</div>
</section>
<section class="just-married pt-200 pb-200 overlay">
<div class="background-img">
<img src="picture/17.jpg" alt="">
</div>
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<div class="block-content front-p">
<h2 class="typo">❤</h2>
<h2 class="heavy uppercase mt-10 light">执子之手,与子携老</h2>
</div>
</div>
</div>
</div>
</section>
<footer class="footer pt-70 pb-70">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center">
<p class="uppercase heavy normal">© 2017 love. 周广腾 & 陈雪</p>
</div>
</div>
</div>
</footer>
</div>
<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="js/jquery.countdown.min.js" type="text/javascript"></script>
<script src="js/venobox.min.js" type="text/javascript"></script>
<script src="js/smooth-scroll.js" type="text/javascript"></script>
<script src="js/script.js" type="text/javascript"></script>
<script type="text/javascript">
var together = new Date();
var strs = "2019-07-01";
var nowTime=new Date();
var together = new Date(strs.replace(/-/g,"/"));
timeElapse(together);
setInterval(function () {timeElapse(together);}, 500);
function timeElapse(c){
var e=Date();
var f=(Date.parse(e)-Date.parse(c))/1000;
var g=Math.floor(f/(3600*24));f=f%(3600*24);
var b=Math.floor(f/3600);
if(b<10){b="0" b}f=f600;var d=Math.floor(f/60);
if(d<10){d="0" d}f=f`;
if(f<10){f="0" f}
var a='<span class="digit">' g '</span> days <span class="digit">' b '</span> hours <span class="digit">' d '</span> minutes <span class="digit">' f "</span> seconds";$("#elapseClock").html(a)};
</script>
<link rel="stylesheet" href="css/cuplayer.css">
<div style="position:absolute; top:50px; right:50px;">
<audio id="main_audio" autoplay="autoplay" preload="auto" loop>
<source src="1.MP3" type="audio/mpeg" />
</audio>
<a class="c-white fs-12 icon-play rotate" id="btn-play" href="javascript:void(0);"></a>
</div>
<script type="text/javascript">
//获取picid函数
$(function(){
$("area").click(function(){
var picId=$(this).attr("data-id");
var picSrc="images/img_big/" picId ".jpg"
$(".modal-content>.pic-box>img").attr("src",picSrc);
})
var isPlaying = function(audio) {return !audio.paused;}
var a = document.getElementById('main_audio');
$('#btn-play').on('click', function() {
if($(this).hasClass('rotate')) {
a.pause();
$(this).removeClass('rotate');
} else {
a.play();
$(this).addClass('rotate');
}
});
})
</script>
<script src="js/jweixin-1.0.0.js"></script>
<script>
function autoPlayAudio1() {
wx.config({
// 配置信息, 即使不正确也能使用 wx.ready
debug: false,
appId: '',
timestamp: 1,
nonceStr: '',
signature: '',
jsApiList: []
});
wx.ready(function() {
document.getElementById('main_audio').play();
});
}
autoPlayAudio1(); // 推荐使用方法1
</script>
<bgsound src="1.mp3" loop="-1"/>
<audio src="http://www.51bbw.cn/mp3/1youdiantian.mp3" controls autoplay='autoplay' loop="loop" id="bgmusic" style="display:none"></audio>
<script>
(function() {
function log(info) {
console.log(info);
// alert(info);
}
function forceSafariPlayAudio() {
audioEl.load(); // iOS 9 还需要额外的 load 一下, 否则直接 play 无效
audioEl.play(); // iOS 7/8 仅需要 play 一下
}
var audioEl = document.getElementById('bgmusic');
audioEl.addEventListener('loadstart', function() {
log('loadstart');
}, false);
audioEl.addEventListener('loadeddata', function() {
log('loadeddata');
}, false);
audioEl.addEventListener('loadedmetadata', function() {
log('loadedmetadata');
}, false);
audioEl.addEventListener('canplay', function() {
log('canplay');
}, false);
audioEl.addEventListener('play', function() {
log('play');
// 当 audio 能够播放后, 移除这个事件
window.removeEventListener('touchstart', forceSafariPlayAudio, false);
}, false);
audioEl.addEventListener('playing', function() {
log('playing');
}, false);
audioEl.addEventListener('pause', function() {
log('pause');
}, false);
// 由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio,
// 因此我们通过一个用户交互事件来主动 play 一下 audio.
window.addEventListener('touchstart', forceSafariPlayAudio, false);
audioEl.src = "http://www.51bbw.cn/mp3/1youdiantian.mp3";
})();
</script>
</body>
</html>2.CSS代码
代码语言：css复制/* ------ venobox.css --------*/
.vbox-overlay *, .vbox-overlay *:before, .vbox-overlay *:after{
-webkit-backface-visibility: hidden;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
/* ------- overlay: change here background color and opacity ----- */
.vbox-overlay{
background: rgba(255,255,255, .9);
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 1006;
opacity: 0;
}
/* ----- preloader - choose between CIRCLE, IOS, DOTS, QUADS ----- */
/* circle preloader */
.vbox-preloader{
position:fixed;
width:32px;
height:32px;
left:50%;
top:50%;
margin-left:-16px;
margin-top:-16px;
text-indent: -100px;
overflow: hidden;
-webkit-animation: playload 1.4s steps(18) infinite;
-moz-animation: playload 1.4s steps(18) infinite;
-ms-animation: playload 1.4s steps(18) infinite;
-o-animation: playload 1.4s steps(18) infinite;
animation: playload 1.4s steps(18) infinite;
}
.vbox-preloader.share{
display:none;
}
@-webkit-keyframes playload {
from { background-position: 0px; }
to { background-position: -576px; }
}
@-moz-keyframes playload {
from { background-position: 0px; }
to { background-position: -576px; }
}
@-ms-keyframes playload {
from { background-position: 0px; }
to { background-position: -576px; }
}
@-o-keyframes playload {
from { background-position: 0px; }
to { background-position: -576px; }
}
@keyframes playload {
from { background-position: 0px; }
to { background-position: -576px; }
}
/* IOS preloader */
/*.vbox-preloader{
position:fixed;
width:32px;
height:32px;
left:50%;
top:50%;
margin-left:-16px;
margin-top:-16px;
background-image: url(../images/preload-ios.png);
text-indent: -100px;
overflow: hidden;
-webkit-animation: playload 1.4s steps(12) infinite;
-moz-animation: playload 1.4s steps(12) infinite;
-ms-animation: playload 1.4s steps(12) infinite;
-o-animation: playload 1.4s steps(12) infinite;
animation: playload 1.4s steps(12) infinite;
}
@-webkit-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@-moz-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@-ms-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@-o-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
*/
/* dots preloader */
/*
.vbox-preloader{
position:fixed;
width:32px;
height:11px;
left:50%;
top:50%;
margin-left:-16px;
margin-top:-16px;
background-image: url(../images/preload-dots.png);
text-indent: -100px;
overflow: hidden;
-webkit-animation: playload 1.4s steps(24) infinite;
-moz-animation: playload 1.4s steps(24) infinite;
-ms-animation: playload 1.4s steps(24) infinite;
-o-animation: playload 1.4s steps(24) infinite;
animation: playload 1.4s steps(24) infinite;
}
@-webkit-keyframes playload {
from { background-position: 0px; }
to { background-position: -768px; }
}
@-moz-keyframes playload {
from { background-position: 0px; }
to { background-position: -768px; }
}
@-ms-keyframes playload {
from { background-position: 0px; }
to { background-position: -768px; }
}
@-o-keyframes playload {
from { background-position: 0px; }
to { background-position: -768px; }
}
@keyframes playload {
from { background-position: 0px; }
to { background-position: -768px; }
}
*/
/* quads preloader */
/*
.vbox-preloader{
position:fixed;
width:32px;
height:10px;
left:50%;
top:50%;
margin-left:-16px;
margin-top:-16px;
background-image: url(../images/preload-quads.png);
text-indent: -100px;
overflow: hidden;
-webkit-animation: playload 1.4s steps(12) infinite;
-moz-animation: playload 1.4s steps(12) infinite;
-ms-animation: playload 1.4s steps(12) infinite;
-o-animation: playload 1.4s steps(12) infinite;
animation: playload 1.4s steps(12) infinite;
}
@-webkit-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@-moz-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@-ms-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@-o-keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
@keyframes playload {
from { background-position: 0px; }
to { background-position: -384px; }
}
*/
/* ----- navigation ----- */
.vbox-close {
position: fixed;
right: 32px;
top: 32px;
width: 32px;
height: 32px;
cursor:pointer;
text-indent:-9999px;
}
.vbox-close:before, .vbox-close:after {
position: absolute;
left: 15px;
content: ' ';
height: 28px;
width: 2px;
background: #efd1be;
}
.vbox-close:before {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
}
.vbox-close:after {
transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
}
.vbox-next, .vbox-prev{
box-sizing: content-box;
cursor: pointer;
position: fixed;
top: 50%;
color: #fff;
width: 30px;
height: 170px;
margin-top: -85px;
text-indent: -100px;
border: solid transparent; /* Using border instead of padding to keep bg image in place */
overflow: hidden;
}
.vbox-prev{
left: 0;
border-width: 0 30px 0 10px;
}
.vbox-next{
right: 0;
border-width: 0 10px 0 30px;
}
.vbox-title{
width: 100%;
height: 40px;
float: left;
text-align: center;
line-height: 28px;
font-size: 13px;
color: #999999;
padding: 6px 40px;
overflow: hidden;
position: fixed;
display: none;
top: 10px;
left: 0;
font-family: 'montserratregular';
text-transform:uppercase;
letter-spacing: 1px;
}
.vbox-title span{
color:#181818;
}
.vbox-num{
cursor: pointer;
position: fixed;
top: 10px;
left: 10px;
height: 40px;
display: block;
color: #181818;
overflow: hidden;
line-height: 28px;
font-size: 16px;
padding: 6px 10px;
display: none;
font-family: 'montserratregular';
}
/* ------- inline window ------ */
.vbox-inline{
width: 420px;
height: 315px;
padding: 10px;
background: #fff;
text-align: left;
margin: 0 auto;
overflow: auto;
}
/* ------- Video & iFrames window ------ */
.venoframe{
border: none;
width: 960px;
height: 720px;
}
@media (max-width: 992px) {
.venoframe{
width: 640px;
height: 480px;
}
}
@media (max-width: 767px) {
.venoframe{
width: 420px;
height: 315px;
}
}
@media (max-width: 460px) {
.vbox-inline{
width: 100%;
}
.venoframe{
width: 100%;
height: 260px;
}
}
/* ------- PLease do NOT edit this! (or do it at your own risk) ------ */
.vbox-open{
position:relative;
}
.vbox-container{
position: relative;
background: #000;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.vbox-content{
text-align: center;
float: left;
width: 100%;
position: relative;
overflow: hidden;
}
.vbox-container img{
max-width: 100%;
height: auto;
border-radius:6px;
}
