HTML5七夕情人节表白网页?全屏七夕表白页面滚动模板? HTML+CSS+JavaScript
这是程序员表白系列中的100款网站表白之一，旨在让任何人都能使用并创建自己的表白网站给心爱的人看。 此波共有100个表白网站，可以任意修改和使用，源码已上传，演示网址如下。
🧡文章末尾-已经附上源码下载地址
作品介绍
1.网页作品简介 ：基于 HTML+CSS+JavaScript 制作七夕情人节表白网页, 生日祝福, 七夕告白, 求婚, 浪漫爱情3D相册,炫酷代码 ,已经兼容手机端和电脑端, 快来制作一款高端的表白网页送(他/她)生日祝福网页,制作修改简单, 需替换图片和文字即可.可自行更换背景音乐。
2.网页作品编辑：任意HTML编辑软件（如：DW、HBuilder、NotePAD 、Vscode 、Sublime 、Webstorm、 Notepad++ ）均可修改网页。
一、作品展示
二、文件目录
三、代码实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>照片墙</title>
<script async src="http://c.cnzz.com/core.php"></script>
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<div class="flowtime">
<div class="ft-section section-1" data-id="section-1">
<div id="/section-1/page-1" class="ft-page page-1" data-id="page-1">
<p class="text1"><span id="text-75" contenteditable="true">晗晗</span> ? <span id="text-76" contenteditable="true">小宇</span> <span id="text-77" contenteditable="true">一生一世</span></p>
<p class="text2">请按键盘 "↓" <span id="text-78" contenteditable="true">开始倾听我的表白</span></p>
</div>
<div id="/section-1/page-2" class="ft-page page-2" data-id="page-2">
<p class="top-text" id="text-1" contenteditable="true">过去的张千一直是一个人生活，享受着孤独，也憧憬着爱情。</p>
<img src='img/iali63.jpg' alt="过去的张千一直是一个人生活，享受着孤独，也憧憬着爱情。" />
</div>
<div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3">
<h2 class="text" id="text-2" contenteditable="true">一个人的长廊</h2>
<img src='img/iali35.jpg' alt="一个人的长廊" />
</div>
<div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4">
<h2 class="center-text" id="text-3" contenteditable="true">一个人的山岗</h2>
<img src='img/iali6.jpg' alt="一个人的山岗" />
</div>
</div>
<div class="ft-section section-2" data-id="section-2">
<div id="/section-2/page-1" class="ft-page page-5 full-img" data-id="page-1">
</div>
<div id="/section-7/page-3" class="ft-page page-41" data-id="page-3">
<img src='img/iali30_1.jpg' class='img1' />
<img src='img/iali30_2.jpg' class='img2' />
<h3 id="text-46" contenteditable="true"> 张千又怎会飞的更高更远</h3>
</div>
<div id="/section-7/page-4" class="ft-page page-42" data-id="page-4">
<h3><span id="text-47" contenteditable="true">张千不想这样。他要为Yvonne改变自己</span><br /><span id="text-48" contenteditable="true">Yvonne说她喜欢喜欢帮助他们家的人，于是张千许下愿望</span></h3>
<img src='img/iali69.jpg' />
</div>
<div id="/section-7/page-5" class="ft-page page-43" data-id="page-5">
<img src='img/iali42.jpg' />
<h3 id="text-49" contenteditable="true">我愿为你变成什么都会修的人</h3>
</div>
<div id="/section-7/page-6" class="ft-page page-44 left-img" data-id="page-6">
<h3><span id="text-50" contenteditable="true">爱情就像花草一样</span><br /><span id="text-51" contenteditable="true">需要用包容来浇灌</span></h3>
<img src='img/iali0.jpg' />
</div>
<div id="/section-7/page-7" class="ft-page page-45 left-img" data-id="page-7">
<h3><span id="text-52" contenteditable="true">张千很幸福，要过生日了</span><br /><span id="text-53" contenteditable="true">Yvonne开始为张千准备礼物</span></h3>
<img src='img/iali18.jpg' />
</div>
</div>
<div class="ft-section section-8" data-id="section-8">
<div id="/section-8/page-1" class="ft-page page-46" data-id="page-1">
<img src='img/iali57.gif' />
<h3>
<span id="text-54" contenteditable="true">看着礼物</span>
<span id="text-55" contenteditable="true">张千好开心</span>
<span id="text-56" contenteditable="true">因为他知道她对他的心意</span>
<span id="text-57" contenteditable="true">可惜的是张千没有送给Yvonne过</span>
</h3>
</div>
<div id="/section-8/page-2" class="ft-page page-47 top-text" data-id="page-2">
<img src='img/iali58.jpg' />
<h3>
<span id="text-58" contenteditable="true">想想后面还有一辈子</span>
<span id="text-59" contenteditable="true">张千好开心</span>
<span id="text-60" contenteditable="true">因为可以和她</span>
<span id="text-61" contenteditable="true">去全世界好多地方玩</span></h3>
</div>
<div id="/section-8/page-3" class="ft-page page-48 left-img" data-id="page-3">
<p><span id="text-62" contenteditable="true">张千也会继续努力</span><br /><span id="text-63" contenteditable="true">为了他和Yvonne的梦之城堡</span></p>
<img src='img/iali65.jpg' />
</div>
<div id="/section-8/page-4" class="ft-page page-49 full-img" data-id="page-4">
<img src='img/iali71.jpg' />
<p class="text">
<span class='text' id="text-64" contenteditable="true">张千很幸福，因为他找到了Yvonne。他相信后面的每天都会是快乐的</span><br />
<span class='text' id="text-65" contenteditable="true">简简单单，体会着与Yvonne在一起的每一个刻</span>
</p>
</div>
<div id="/section-8/page-5" class="ft-page page-50" data-id="page-5">
<p class='text' id="text-66" contenteditable="true">后来的一天，Yvonne说他不喜欢他抽烟，于是张千就拼了命的戒烟。这只是他们幸福生活中的一件小事，小到无法引起别人的注意。可这是属于张千和Yvonne的幸福生活。</p>
<img src='img/iali50_1.jpg' class='img1' />
<img src='img/iali50_2.jpg' class='img2' />
</div>
<div id="/section-8/page-6" class="ft-page page-51" data-id="page-6">
<p>
<span id="text-67" contenteditable="true">Yvonne：永远有多远？</span><br />
<span id="text-68" contenteditable="true">张千：比时间多一秒就是永远，我会永远爱你</span><br />
<span id="text-69" contenteditable="true">Yvonne：世界有多大？</span><br />
<span id="text-70" contenteditable="true">张千：你走到哪里，世界就有多大</span>
</p>
</div>
</div>
<div class="ft-section section-9" data-id="section-9">
<div id="/section-9/page-1" class="ft-page page-52 full-img" data-id="page-1">
<h3 id="text-71" contenteditable="true">愿得一人心，白首不相离</h3>
<img src='img/iali20.jpg' />
</div>
<div id="/section-9/page-2" class="ft-page page-53" data-id="page-2">
<img src='img/iali68.jpg' alt='happy birthday' />
<h3 id="text-72" contenteditable="true">情人节快乐</h3>
</div>
<div id="/section-9/page-3" class="ft-page page-54 center-img" data-id="page-3">
<div class="center-img">I love you</div>
</div>
<div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4">
<img src='img/14915.jpg' />
<p class="text">
<span id="text-73" contenteditable="true">花花和pite的故事会一直继续下去。</span><br />
<span id="text-74" contenteditable="true">无论精彩、平淡都会是他们喜欢的。</span><br />
<br />
<br />
<span> -- 按“Esc"键有惊喜</span>
</p>
</div>
</div>
</div>
<div class="nojavascript">您的浏览器版本太低或禁用了javascript，无法正常浏览本页面</div>
</div>
<audio id="bgmMusic" src="music/saveme.mp3" autoplay="autoplay" loop preload="auto" type="audio/mp3"></audio>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script src="js/all.min.js"></script>
<script src="js/love.min.js"></script>
<div class="mPower"><span id="on" title="点击暂停"></span><span id="off" title="点击播放"></span></div>
</body>
</html>
四、学习资料
web前端 零基础-入门到高级 (视频+源码+开发软件+学习资料+面试题) 一整套 (教程)
适合入门到高级的童鞋们入手~送1000套HTML+CSS+JavaScript模板网站
五、源码下载
【百度网盘-完整源码下载地址↓】
链接：https://pan.baidu.com/s/1UdFzRE6mEKC5D1xALTMbYw
提取码：8888