🍎作者：尘世镜花恋
🍎请进来的客官吃水果：🍇🍉🍈🍍🍒🍓
🍎什么？没有你喜欢的？
🍎那进来吧你~
（一）写在前面
最近有朋友求助我，想让我帮他写个除夕表白的网页，不精通html的我还是答应了（主学python），经过寻找网络一些css,js资源，我觉得我还是能勉强拼接出一些像样的东西的，完成品他觉得很好，在pc端的显示是最佳的，看到朋友这么happy，我还是挺有成就感的（自恋ing~~）
知道各位看官肯定不会细细查看后面内容，喏，代码就在这里（坏笑）：csdn资源下载
文末有免费下载地址哦~
所以各位看官还是耐心看完文章再说，想脱单的你还在乎这点时间吗？（坏笑）
效果图（@不心动的客官可以直接退出@）：
因为我在电脑上，微软的edge模拟移动端效果实在太差，建议还是自己试试移动端，背景音乐是把回忆拼好给你，是那位朋友要求的，，觉得有一丝丝忧伤…
（二）主体介绍
ps:js里面有一部分文件是无用的，css中有很多类供选择，大概有70多个吧，分的有pc端和移动端（本文章中我使用的均为pc端），可以根据需要把对应div或者是其他标签的类更换一下。
- 如果看官要放到自己的服务器上面，这里要更改一下，不再赘述哦（毕竟部署服务器的你貌似只缺成堆的代码）
- 如果你只是希望在手机或者pc本地打开，那不需要考虑1的内容
- 建议更改背景音乐，符合尺寸的图片（可在css中寻找标签属性），以及表白的内容，不要偷懒哦~
觉得页面的动态小人不好看？可参考：
小帅哥： https://unpkg.com/live2d-widget-model-chitose@1.0.5/assets/chitose.model.json
萌娘：https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json
小可爱（女）：https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json
小可爱（男）：https://unpkg.com/live2d-widget-model-haruto@1.0.5/assets/haruto.model.json
初音：https://unpkg.com/live2d-widget-model-miku@1.0.5/assets/miku.model.json
然后将第二个js改为
<script>
L2Dwidget.init({ "model": { jsonPath:
"https://unpkg.com/live2d-widget-model-shizuku@1.0.5/assets/shizuku.model.json",//不一样的是这个网址
"scale": 1 }, "display": { "position": "right", "width": 110, "height": 150,
"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
"react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
</script>
index.html代码如下，填写表单提交后用js进行简单验证，在js部分注意更改ta的名字
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta charset="gbk" />
<title>新的一年要开开心心的</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<form class="box" action="" method="" style="font-family:QHK;font-size:25px;">
<h1>Welcom<br /><hr \></h1><span>因爱而生</span>
<input type="text" id="username" placeholder="请输入你的名字"/>
<!--<input type="password" name="userpassword" placeholder="密码是1234567" />-->
<input type="submit" name="submit" class="submit" value="点击进入" onClick="f()" /><!--javascript:form. action='Memories.html';-->
</form>
</body>
<!-- 页面小人 -->
<script src="https://eqcn.ajz.miesnfu.com/wp-content/plugins/wp-3d-pony/live2dw/lib/L2Dwidget.min.js"></script>
<script>
L2Dwidget.init({ "model": { jsonPath:
"https://unpkg.com/live2d-widget-model-koharu@1.0.5/assets/koharu.model.json",
"scale": 1 }, "display": { "position": "left", "width": 160, "height": 200,
"hOffset": 0, "vOffset": -20 }, "mobile": { "show": true, "scale": 0.5 },
"react": { "opacityDefault": 0.8, "opacityOnHover": 0.1 } });
</script>
<script>
function f(){
var name = document.getElementById("username").value;
var submit = document.getElementById("username");
if (name==""){//这里输入ta的名字
submit.form.action = "Memories.html";
}
else{
alert("请输入正确的名字（不要乱输或输别人的名字哦~）");
}
}
</script>
</html>
Memories.html，想加几个滚动的可以模仿上面的格式随便加，但是要注意不能复制第一屏
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>祝福</title>
<link rel="stylesheet" href="css/jquery.fullPage.css">
<link rel="stylesheet" href="css/memories.css">
</head>
<style>
h1{text-align:center}
</style>
<body>
<form action="" method="post">
<!-- 背景音乐 -->
<audio
autoplay="autoplay"
loop="loop"
preload="auto"
src="music/1.mp3">
</audio>
<div class="bgcolor">
<div style="z-index:100;" id="dowebok">
<!--第一屏-->
<div class="section">
<div class="ly-box01">
<div class="ly-txt01">
<h1>新年快樂！</h1>
</div>
<div class="ly-imgbox11">
<img class="ly-img11" src="images/first.jpg">
</div>
</div>
</div>
<!--第二屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint11"></div>
<div class="ly-box11">
<div class="ly-txt11">
2023 除夕
</div>
<div class="ly-txt12">
我不得不承认，今生只对你一心一意，我不得不承认，你就是我的天和地，感谢你曾经的闯进，让我拥有一生的回忆。
</div>
<div class="ly-imgbox11">
<img class="ly-img11" src="images/1.jpg">
</div>
</div>
<div class="ly-triangle11"></div>
<div class="ly-box12">
<div class="ly-txt13">
2023 除夕
</div>
<div class="ly-txt14">
<br/>新年到来，<br/><br/>
祝你新年快乐!<br/><br/>
万事如意!<br/><br/>
</div>
</div>
<div class="ly-triangle12"></div>
</div>
<!--第三屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint21"></div>
<div class="ly-box21">
<h3> 2023年已然开始<h3/>
<div class="ly-txt14">
多少个白天想着你，<br/>多少个夜晚思念着你，<br/>无数次梦里遇见你，<br/>你就是我一生的牵挂，<br/>新年到了，对你的思念越来越浓，祝新年快乐!
</div>
<div class="ly-imgbox21">
<img class="ly-img21" src="images/2.jpg">
</div>
</div>
<div class="ly-triangle21"></div>
</div>
<!--第四屏-->
<div class="section">
<div class="timeline"></div>
<div class="timepoint31"></div>
<div class="ly-box31">
<div class="ly-txt32">
新年愿你越来越美丽!<br/><br/>总以为水是山的故事，<br/><br/>海是帆的故事，<br/><br/>天是云的故事，<br/><br/>你是我的故事，<br/><br/>却不知我是不是你的故事!<br/><br/>我放下了尊严，<br/><br/>放下了个性，<br/><br/>放下了固执，<br/><br/>都只是因为放不下你。
</div>
</div>
<div class="ly-triangle31"></div>
<div class="ly-box32">
<div class="ly-txt34">
愿你的春色迷人；<br/><br/>愿你的夏露清凉；<br/><br/>愿你的秋风潇洒；<br/><br/>愿你的冬雪皎洁；<br/><br/>愿你有一个收获丰足的新年！<br/><br/>
</div>
<div class="ly-imgbox31">
<img class="ly-img31" src="img/1.jpg">
</div>
</div>
<div class="ly-triangle32"></div>
</div>
<div class="section">
<div class="timeline"></div>
<div class="timepoint31"></div>
<div class="ly-box31">
<div class="ly-txt32">
<h3>总之，祝你新年快乐！</h3>
</div>
</div>
</div>
</div>
<!--动态方块-->
<ul class="bg-bubbles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div></form>
<!-- <audio muted src="music/1.mp3" autoplay="autoplay" loop="loop"></audio> -->
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/jquery.fullPage.min.js"></script>
<script src="js/memories.js"></script>
</body>
</html>
（三）Download
该说的说完了，上面只有两个页面的代码，贴心的我为客官准备了两个完整免费下载地址（坏笑）：
（四）吐槽
制作过程中朋友非常热心，每一次的建议都会命中我这个单身贵族的要害…
for instance:
又或者是：
不再多说，哭晕在厕所…
有帮助的记得给个小小的赞和收藏~
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
