本文分享了一个程序员为心爱之人制作的520表白网页，通过精心设计的页面和互动元素传达深情厚意。
❤ 精彩专栏推荐👇🏻👇🏻👇🏻
💂 作者主页: 【进入主页—🚀获取更多源码】
🎓 web前端期末大作业： 【📚HTML5网页期末作业 (1000套) 】
🧡 程序员有趣的告白方式：【💌HTML七夕情人节表白网页制作 (125套) 】
七夕来袭！是时候展现专属于程序员的浪漫了！你打算怎么给心爱的人表达爱意？鲜花礼物？代码表白？还是创意DIY？或者…无论那种形式，快来秀我们一脸吧！
二、📚网站介绍
📒网站文件方面：html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件；
📙网页编辑方面：可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad++ 等任意html编辑软件进行运行及修改编辑等操作）。
其中：
（1）📜html文件包含：其中index.html是首页、其他html为二级页面；
（2）📑 css文件包含：css全部页面样式,3D动态效果,雪花飘落等等
（3）📄 js文件包含：页面炫酷效果实现
三、🔗网站效果
▶️1.视频演示
113 庆琴&嘉航love
🧩 2.图片演示
四、💒 网站代码
🧱HTML结构代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
<link rel="icon" href="./favicon.ico">
<title>曹庆臣 - 高嘉航 | 与你走过的第四个520</title>
<meta name="description" content="这是我们度过的第四个520，时间真的很快很快，有你的每一天都是我们520~">
<meta name="keywords" content="nutssss,坚果,主页,博客,tqy,xhj">
<link rel="stylesheet" type="text/css" href="css/lovexhj.css">
<link rel="stylesheet" href="css/swiper.css">
<link rel="stylesheet" type="text/css" href="css/firacode.css">
</head>
<body>
<!-- 标题板块 -->
<div class="title">
<img src="picture/bg1.gif" alt="bgGif">
<p id="tqyxhj"></p>
</div>
<!-- 分页1 - 骚话 -->
<div class="page page1">
<div class="swiper-container swiper-container-lovexhj1">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="page1-lovexhj1">
<img src="picture/1.jpg" alt="xhj">
<img src="picture/cat.gif" alt="cat">
<img src="picture/2.jpg" alt="tqy">
<p id="lovetime"></p>
<p>我也不知道该准备一点什么给你逗你开心</p>
<p>还是写一点好玩的送给你吧~</p>
<span class="right">往右划动 →</span>
</div>
</div>
<div class="swiper-slide">
<div class="page1-lovexhj1">
<img class="cat" src="picture/cat2.gif" alt="cat2">
<p class="catText">你常对我发的表情 ↑</p>
<p>上次也是花心思写了一个小玩意给你</p>
<p>但我觉得整体设计&&界面都过于<b>LOW</b></p>
<p>那就重新送你一个吧</p>
<span class="right">再划一下 →</span>
</div>
</div>
<div class="swiper-slide">
<div class="page1-lovexhj1">
<img class="cat" src="picture/cat3.gif" alt="cat3">
<p class="catText">抱死你 ↑</p>
<p>这次我<b>超级超级超级超级</b></p>
<p>认真的写了一遍</p>
<p style="font-size: 13px;">以 框架构造、
<span style="color: red; font-size: 16px;">爱你</span>、 视觉体验、响应式 为核心制作
</p>
<span class="right">再划一次吧 →</span>
</div>
</div>
<div class="swiper-slide">
<div class="page1-lovexhj1">
<img class="cat" src="picture/cat4.gif" alt="cat4">
<p class="catText">拍你猪头 ↑</p>
<p>这次应该不会太难看了吧</p>
<p>希望你喜欢呀</p>
<p>爱你哟(๑′ᴗ‵๑)</p>
<b>520快乐我的<span style="color: pink;">猪</span></b>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-lovexhj1"></div>
</div>
</div>
<!-- 分页2 - 时间轴 -->
<div class="page page2">
<div class="swiper-container swiper-container-lovexhj2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-1.jpg" alt="page2-1">
<p><b>故事的开始</b></p>
<p>2017年3月27日</p>
<p>我们的故事，从此开始</p>
</div>
</div>
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-2.jpg" alt="page2-2">
<p><b>第一次抱你的大腿</b></p>
<p>在QQ炫舞中输给了你</p>
</div>
</div>
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-3.jpg" alt="page2-3">
<p><b>第一次与你相见</b></p>
<p>第一次与你相见是在一个冬季</p>
<p>也是与你擦出火花，认定你是我的唯一。</p>
</div>
</div>
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/5a.jpg" alt="page2-4">
<p><b>第一次走在雪地上</b></p>
<p>天气很冷，但与你在一起玩却很暖和</p>
<p>一起在雪地上涂鸦，看你画猪头哈哈</p>
</div>
</div>
<!--
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-5.jpg" alt="page2-5">
<p><b>第一次庆祝你成年生日</b></p>
<p>刚在一起不久就赶上了你的成年生日</p>
<p>送你礼物的那一刻你笑的是多么的开心</p>
</div>
</div>
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-6.jpg" alt="page2-6">
<p><b>第一次庆祝我的生日</b></p>
<p>吃牛排看电影</p>
<p>很俗气但很开心</p>
</div>
</div>
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-7.jpg" alt="page2-7">
<p><b>第一次与你看电影</b></p>
<p>这应该算是第一次认真的看完了一部电影吧哈哈</p>
</div>
</div>
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-8.jpg" alt="page2-8">
<p><b>第一次在深夜跑出来陪你</b></p>
<p>偶然条件下，凌晨三点我们在一起散步</p>
<p>安静的马路上充满了甜甜的感觉</p>
</div>
</div>
<div class="swiper-slide">
<div class="page2-box">
<img src="picture/page-2-9.jpg" alt="page2-9">
<p><b>第一次与你打游戏</b></p>
<p>看你输了“赛车”时生气的样子好好笑</p>
<p>并偷偷在后面摸了一下你的猪头</p>
</div>
</div>
-->
<div class="swiper-slide">
<div class="page2-box">
<img src="images/aa.png">
<p><b>和你一起玩炫舞</b></p>
<p>始终没法赢你</p>
<p>但是也没放弃</p>
</div>
</div>
</div>
<div class="swiper-pagination swiper-pagination-lovexhj2"></div>
</div>
</div>
<!-- 分页3 - 一段话 -->
<div class="page page3">
<div id="talkToXHJ">
<b>回顾上一个520</b>
<br /> 当时你从外面特地跑过来找我，我知道你超级超级害怕晕车，但是还是为了当天见到我，坐车回来了，当我听见你要回来的时候我还以为你在骗我哈哈，结果晚上真的见到你了，你一下车就冲过来抱住了我，这个画面回想起来仿佛就发生在昨天一样清晰...
<br />
<br />
<b>这是我们的第四个520</b>
<br /> 比较直男的我，还是用属于我的方式来送你一个小小的虚拟礼物（上次那个太不用心了哈哈）
<br /> 这段时间经常告诉你我在写代码不能陪你玩，其实我都在花心思做这个呢，我想把它做到很好很好，让你感受一下“代码”带来了趣味性
<br /> 用心才能做得更好，陪你也是这样，每天的事情大同小异，除去日常琐事剩下的就是陪你，日复一日但是每天都会是不同的感觉，带来不同的乐趣
<br /> 陪你玩游戏，陪你聊天，一起互怼一起疯，看似再平常不过的事情在我们这里都充满了开心
<br />
<br />
<b>我想</b>
<br /> 我们还会有好多好多的520，不过每一次我都要尝试用新鲜的思路去给你带来一些值得回忆的瞬间还是很有挑战性的，对我来说给你准备惊喜的过程总是充满了动力
<br /> 用文字来对你说一些话感觉好像情书一样尴尬哈哈，那就不说了我
<br /> 节日快乐猪
<br /> ## 爱你的仔仔 (๑′ᴗ‵๑)~ ❤
</div>
</div>
<!-- 分页4 - 结尾 -->
<div class="page page4">
<div class="page4-box">
<div class="page4-img">
<div class="swiper-container swiper-container-lovexhj3">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="picture/3a.jpg">
</div>
<div class="swiper-slide">
<img src="picture/3b.jpg">
</div>
<div class="swiper-slide">
<img src="picture/3c.jpg">
</div>
<div class="swiper-slide">
<img src="picture/4a.jpg">
</div>
<div class="swiper-slide">
<img src="picture/4b.jpg">
</div>
<div class="swiper-slide">
<img src="picture/4c.jpg">
</div>
<div class="swiper-slide">
<img src="picture/4d.jpg">
</div>
<div class="swiper-slide">
<img src="picture/4f.jpg">
</div>
<div class="swiper-slide">
<img src="picture/4g.jpg">
</div>
<div class="swiper-slide">
<img src="picture/4h.jpg">
</div>
</div>
<div class="swiper-button-prev swiper-button-prev-lovexhj3"></div>
<div class="swiper-button-next swiper-button-next-lovexhj3"></div>
</div>
</div>
<div class="page4-text">
<h1>Send To Future</h1>
<p>有你在的每一天都如糖果一样甜</p>
</div>
</div>
<div class="footer">
<div class="footerBox">
<!--<p>
© 2020
<a href="">TQY && XHJ</a>
</p>
<p>THEME MADE BY <a href="">lovexhj</a></p>-->
</div>
</div>
</div>
<!-- 两只XHJ一样的猪 -->
<div class="xhjIsPig">
<img src="picture/pig1.gif" alt="pig1" class="pig1">
<img src="picture/pig2.gif" alt="pig2" class="pig2">
</div>
<!-- js加载 -->
<script src="scripts/wow.js"></script>
<script src="scripts/typeit.min.js"></script>
<script src="scripts/swiper-3.4.2.min.js"></script>
<script src="scripts/jquery.js"></script>
<script src="scripts/lovetime.js"></script>
<script src="scripts/talk.js"></script>
<script src="scripts/swiper.js"></script>
<script src="scripts/su.js"></script>
<script>
(function() {
new WOW().init()
})()
</script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('body').wpSuperSnow({
flakes: ['./images/004.png', './images/003.png', './images/002.png',
'./images/001.png'
],
totalFlakes: '100',
zIndex: '999999',
maxSize: '30',
maxDuration: '20',
useFlakeTrans: false
});
});
</script>
</body>
</html>
五、🎁更多源码
1.如果我的博客对你有帮助 请 “👍点赞” “✍️评论” “💙收藏” 一键三连哦！
2.💗【👇🏻👇🏻👇🏻🉑关注我| 获取更多源码】 带您学习各种前端插件、3D炫酷效果、图片展示、文字效果、以及整站模板 、大学生毕业HTML模板 、等!
📣以上内容技术相关问题💌欢迎一起交流学习👇🏻👇🏻👇🏻
扫一扫
327
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
