情人节程序员用HTML网页表白【情人节表白网页】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

原创

IT司马青衫

发布于 2022-08-21 09:27:33

2.6K1

发布于 2022-08-21 09:27:33

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

@TOC

一、网页介绍

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

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

一、网页效果

二、代码展示

1.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">&copy; 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=f%3600;var d=Math.floor(f/60);
			if(d<10){d="0"+d}f=f%60;
			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代码

/* ------ 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;
}