简介这份资源是一套面向程序员及编程爱好者的520表白页面源码使用HTML、CSS与JavaScript三种前端技术实现适合希望以创意方式表达心意的情侣或恋人也可作为前端初学者练习特效与交互的参考案例。压缩包共8个文件包含1个HTML页面、1个CSS样式表、2个JavaScript脚本、3张PNG图片和1个MP3音频整体约524KB涵盖页面结构、样式控制、烟花动画逻辑与背景音效素材。页面实现了逐行打印文字、随机变色、玫瑰花飘落、夜空背景以及按钮触发烟花动画与音乐播放等效果文字内容、颜色与字体均可自行修改便于个性化定制。目前已有5716人学习下载适合在情人节、纪念日或生日等场景直接使用也能帮助读者理解前端动画与交互的基本组织方式。1. 从一份“交得出手”的 520 礼物说起HTML/CSS/JS 表白页到底要解决什么每年五月中旬总有人来问同一个问题想用 HTML、CSS 和 JavaScript 写一个 520 表白页面但网上搜到的代码要么是一屏飘心、要么是满屏弹窗跑起来像十年前的网页送出去自己都不好意思。这个需求看着轻实际卡点很具体——它既要“浪漫”又要“能跑”还得在对方手机上一秒打开、不白屏、不乱码。这套方案就是围绕这三个约束搭的用纯前端三件套做一个可交付的表白页面包含开场动画、文字逐字浮现、爱心粒子背景、时间线回忆和结尾互动按钮适合学生当课程设计交、也适合想认真做一份 520 礼物的人直接改内容上线。下面按需求、设计、实现、避坑、验收的顺序讲透你照着改文案和配色就能用。2. 需求拆解与技术选型为什么不用框架纯三件套反而更稳2.1 先把“浪漫”翻译成可验收的功能点很多人一上来就写代码写到一半发现不知道还差什么。我一般会先把感性需求拆成能打勾的清单这份清单同时也是后面验收的依据功能模块用户看到的效果技术落点验收标准开场加载黑屏渐入一行字再进入主页面CSS 动画 定时器1.5 秒内完成无闪烁爱心粒子背景满屏爱心缓慢上升、轻微摆动Canvas 2D 绘制循环60 帧附近手机不发烫逐字文案表白文字一个字一个字出现JS 定时器 字符串切片可跳过刷新可重播回忆时间线几张卡片按顺序滑入CSS transform 滚动监听滚动到即触发不重复触发结尾互动一个按钮点了有回应事件监听 状态切换点击有明确反馈不报错移动端适配手机上排版不乱、字不挤媒体查询 相对单位375px 宽度下无横向滚动这张表的价值在于它把“好看”这种没法验收的东西换成了“1.5 秒内完成”“375px 无横向滚动”这种能当场测的指标。做毕设或课设时这张表直接就是需求分析章节的骨架做礼物时它保证你不会漏掉某个环节导致对方打开是一片空白。2.2 技术选型纯 HTML/CSS/JS 的三个理由选型这块我踩过坑。早年有人用某个前端框架做表白页本地跑得好好的发给对方打开是白屏——因为对方网络环境加载不到依赖或者构建产物路径写错。纯三件套没有这个问题一个 HTML 文件、一个 CSS 文件、一个 JS 文件双击就能开扔到任何静态托管上都能跑。具体理由有三条。第一是零依赖。没有 npm、没有构建、没有 CDN 外链断网也能打开。表白这种场景对方可能在地铁上、可能网络很差任何外部依赖都是风险。第二是可读可改。收到代码的人如果懂一点前端打开就能看懂结构改文案、换配色都是几分钟的事。用框架反而把简单事情复杂化了。第三是性能可控。爱心粒子用 Canvas 画比用几十个 DOM 元素做动画省得多。DOM 动画在低端手机上掉帧是常态Canvas 只画一张位图压力小一个量级。提示如果你的课程设计明确要求使用某个框架那按课程要求来如果只是“用前端技术做一个页面”纯三件套是交付风险最低的选择。2.3 目录结构与文件职责动手前先把文件结构定下来后面所有代码都往里填不会越写越乱love-page/ ├── index.html # 页面骨架只放结构不写样式和逻辑 ├── css/ │ └── style.css # 全部样式、动画关键帧、媒体查询 ├── js/ │ ├── particles.js # 爱心粒子背景独立成文件方便调参 │ └── main.js # 逐字文案、时间线、按钮交互 └── assets/ └── (可选图片) # 回忆照片没有就用纯色卡片这个结构对应一个原则结构、样式、行为分离。index.html 里不出现style...style.css 里不出现document.querySelectormain.js 里不拼 HTML 字符串。分离之后改配色只动 CSS改文案只动 JS 里的配置对象互不干扰。很多网上抄来的代码把三者混在一个文件里改一个颜色要翻半天这就是没分层的代价。3. 总体设计与视觉动线一屏一屏把情绪推上去3.1 页面分屏结构与情绪节奏表白页不是信息页它的核心是节奏。我一般把整页分成四屏每屏承担一个情绪任务第一屏开场黑底一行字淡入制造“要发生什么”的期待停留 1.5 秒左右自动过渡。第二屏主表白爱心粒子背景 逐字浮现的表白文案这是情绪高点停留时间最长。第三屏回忆时间线几张卡片依次滑入把抽象的爱意落到具体的事上情绪从高点缓下来。第四屏互动结尾一个按钮点击后出现回应文案或跳转到一个小彩蛋给整页一个收束。这个结构的关键是“先扬后缓再收”。如果四屏全是满屏飘心对方看十秒就腻了如果全是文字又太干。节奏感是这份方案和网上随手抄的代码最大的区别。3.2 配色与字体两套方案直接选配色不用纠结给两套现成的方案背景主文字强调色适合场景暗夜玫瑰#0d0d12#f5e6ea#ff4d6d晚上发、氛围感强奶油暖阳#fff8f0#3a2e2a#e8637a白天发、清爽不腻字体上中文用系统默认字体栈即可不要引入网络字体——又是一条外部依赖。标题可以适当加大字重和字间距正文行高给到 1.8这是中文长文案在手机上读起来舒服的经验值。强调色只用在按钮和关键句上全页出现强调色的地方不超过三处多了就廉价。3.3 移动端优先的布局策略这份页面的真实打开场景九成是手机所以布局按移动端优先来写。所有尺寸用rem或vw容器最大宽度限制在 640px 并居中这样在电脑上打开也不会拉成一条。媒体查询只需要处理一个断点宽度大于 768px 时把字号和间距整体放大一档。具体写法在下一章的 CSS 里给。注意不要用100vh做全屏高度手机浏览器地址栏收起展开会导致高度跳变用100dvh或者min-height: 100vh配合overflow控制更稳。4. 核心模块实现粒子、逐字文案与时间线的可复用代码4.1 Canvas 爱心粒子一个绘制循环搞定背景粒子背景是整页最出效果的部分也是最容易写崩的部分。核心思路维护一个粒子数组每个粒子有位置、速度、大小、透明度每帧清屏后重绘粒子飘出屏幕就从底部重新生成。爱心形状用参数方程画比贴图片清晰且省资源。// js/particles.js const canvas document.getElementById(heart-bg); const ctx canvas.getContext(2d); let particles []; const COUNT 40; // 粒子数量手机建议 30-50太多会掉帧 function resize() { canvas.width window.innerWidth; canvas.height window.innerHeight; } // 用参数方程画爱心size 控制大小 function drawHeart(x, y, size, alpha) { ctx.save(); ctx.translate(x, y); ctx.scale(size / 20, size / 20); ctx.beginPath(); for (let t 0; t Math.PI * 2; t 0.05) { const px 16 * Math.pow(Math.sin(t), 3); const py -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); t 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py); } ctx.closePath(); ctx.fillStyle rgba(255, 77, 109, ${alpha}); ctx.fill(); ctx.restore(); } function createParticle() { return { x: Math.random() * canvas.width, y: canvas.height Math.random() * 100, // 从屏幕下方生成 size: 8 Math.random() * 14, speed: 0.3 Math.random() * 0.7, alpha: 0.2 Math.random() * 0.5, sway: Math.random() * Math.PI * 2 // 摆动相位 }; } function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((p, i) { p.y - p.speed; p.sway 0.01; p.x Math.sin(p.sway) * 0.4; // 左右轻微摆动 if (p.y -50) particles[i] createParticle(); // 飘出后重生 drawHeart(p.x, p.y, p.size, p.alpha); }); requestAnimationFrame(loop); } resize(); particles Array.from({ length: COUNT }, createParticle); loop(); window.addEventListener(resize, resize);这段代码有三个设计点值得说。第一COUNT是性能阀门手机上 30 到 50 个粒子足够超过 80 个低端机就开始掉帧这是实测出来的经验值不是拍脑袋。第二粒子飘出屏幕后不是删除而是重置位置避免数组频繁增删带来的内存抖动。第三爱心用参数方程逐点连线t的步长 0.05 是精度和性能的折中步长再小曲线更圆滑但计算量翻倍肉眼几乎看不出差别。参数怎么调想要更“密”的氛围就加COUNT想要更“飘”就减小speed上限想要更“淡”就压低alpha上限。改完刷新即可不需要重新构建。4.2 逐字文案定时器 可跳过设计逐字浮现的文案是情绪高点实现不难难在“可跳过”。对方如果没耐心等一个字一个字蹦完会烦所以必须给一个跳过入口。// js/main.js 片段 const CONFIG { text: 从认识你的那天起我的代码里就多了一个常量叫喜欢。, speed: 120, // 每个字的间隔毫秒数 startDelay: 800 // 进入第二屏后延迟多久开始 }; const target document.getElementById(typing-text); let timer null; let index 0; function type() { if (index CONFIG.text.length) return; target.textContent CONFIG.text[index]; timer setTimeout(type, CONFIG.speed); } function skip() { clearTimeout(timer); target.textContent CONFIG.text; // 一次性补全 } setTimeout(type, CONFIG.startDelay); document.getElementById(skip-btn).addEventListener(click, skip);逻辑说明CONFIG把文案和节奏抽成配置改内容只动这一个对象不用翻代码。speed给 120 毫秒是中文阅读的舒适区间太快像报错太慢像卡顿。skip函数先清定时器再补全文本两步缺一不可——只补文本不清定时器会出现“补全后又从头蹦”的经典翻车。跳过按钮建议做成半透明小字放在角落不抢主文案的视觉。4.3 回忆时间线滚动触发与防重复时间线用 CSS 做滑入动画JS 只负责“什么时候加类名”。这里用IntersectionObserver比监听scroll事件干净得多不用自己算滚动位置。// 滚动到卡片时加 show 类触发 CSS 过渡 const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(show); observer.unobserve(entry.target); // 触发一次就解绑防止反复触发 } }); }, { threshold: 0.2 }); // 卡片露出 20% 就触发 document.querySelectorAll(.timeline-card).forEach((el) observer.observe(el));配套的 CSS 过渡这样写.timeline-card { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; } .timeline-card.show { opacity: 1; transform: translateY(0); }threshold: 0.2的含义是卡片露出两成才触发太早触发动画在屏幕外就播完了太晚又显得迟钝。unobserve那行是防重复的关键不加的话卡片上下滚动会反复播放像卡带。时间线卡片的内容建议三到四张每张一句话加一个日期多了对方看不完。4.4 结尾互动按钮状态切换而不是弹窗结尾按钮不要用alert弹窗在手机上又丑又打断。正确做法是按钮点击后原地切换文案和样式const btn document.getElementById(final-btn); const reply document.getElementById(reply-text); let clicked false; btn.addEventListener(click, () { if (clicked) return; // 防连点 clicked true; btn.textContent 收到啦; btn.classList.add(done); reply.textContent 那以后的日子也一起写下去吧。; reply.classList.add(show); });clicked标志位是防连点的后悔药没有它手快的人点两下会触发两次状态切换文案错乱。按钮的done类可以把背景从强调色改成描边样式给一个“已完成”的视觉反馈。这段代码短但它是整页的收束点值得单独打磨。5. 避坑与常见问题排查五个最容易翻车的地方5.1 现象手机上打开一片空白电脑上正常原因通常是路径问题。本地双击打开时用的是file://协议相对路径能解析但上传到静态托管后如果 HTML 里写的是绝对路径或者大小写不一致的文件名就会 404。解决所有引用统一用相对路径文件名全小写上传后按 F12 看 Network 面板有没有红色请求。这是血泪经验我见过太多人卡在这一步以为代码写错了。5.2 现象爱心粒子在低端手机上卡成幻灯片原因有两个粒子数量过多或者每帧都在创建对象。解决把COUNT降到 30检查loop里有没有在循环内new对象或拼接字符串。另外requestAnimationFrame在页面切到后台会自动暂停这是好事不用管但如果用了setInterval做动画切后台还在跑回来就卡顿务必换成requestAnimationFrame。5.3 现象逐字文案刷新后不重播或者重播时叠字原因是target.textContent 在重播前没有清空。解决重播逻辑里先target.textContent 再重置index 0并且清掉旧的定时器。叠字问题九成是定时器没清干净两个type循环同时在跑。5.4 现象页面在 iOS 上滚动卡顿、动画撕裂原因是用了height: 100vh或者对大量元素做了box-shadow动画。解决全屏高度改用100dvh动画只对transform和opacity做这两个属性走 GPU 合成不触发重排。给粒子 canvas 加will-change: transform也能帮上忙但别滥用加多了反而占显存。5.5 现象发给对方对方说“打不开”或“乱码”原因是编码或分享方式。解决HTML 头部必须有meta charsetUTF-8文件保存为 UTF-8 无 BOM 格式。分享时不要直接发 HTML 文件让对方下载很多聊天工具会改后缀而是部署到静态托管给一个链接或者打包成 zip 说明解压后打开 index.html。这一步是交付的最后一公里别栽在这。6. 验收与答辩怎么证明这份表白页“做完了”验收这件事学生和从业者的标准不一样但方法可以统一拿一张检查表逐项当场演示。下面这张表就是我一般用来收尾的左边是检查项右边是操作和判定标准答辩时照着走一遍评委问不倒你。检查项操作判定标准首屏加载清缓存后打开链接3 秒内出现开场文字无白屏动画流畅度手机录屏 10 秒无明显掉帧粒子不卡顿逐字文案等待完整播放一次文字完整、无叠字、无乱码跳过功能播放中点跳过立即补全不再继续蹦字时间线触发上下滚动三次每张卡片只滑入一次结尾按钮连续点击五次只响应一次文案正确移动端适配375px 宽度查看无横向滚动条文字不溢出断网可用断网后本地打开页面完整功能正常答辩时还有一个技巧主动讲一个你踩过的坑和怎么解决的。比如“粒子数量一开始设了 120低端机掉帧后来压到 40 并改成对象复用”这种细节比背功能列表有说服力得多因为它证明你真的跑过、调过。评委最怕听到的是“这个功能实现了”却说不清怎么实现的。代码交付前我习惯把CONFIG对象里的文案、颜色、粒子数集中检查一遍确保没有残留的测试文字和写死的调试颜色。从那以后我每次交付这类页面都强制走一遍上面这张表加一次真机录屏因为电脑上看着完美、手机上翻车的例子实在太多了。希望这份方案能帮你把 520 这份礼物稳稳地送出去也帮你的课程设计拿到一个体面的分数。本文还有配套的精品资源点击获取
简介这份资源是一套面向程序员及编程爱好者的520表白页面源码使用HTML、CSS与JavaScript三种前端技术实现适合希望以创意方式表达心意的情侣或恋人也可作为前端初学者练习特效与交互的参考案例。压缩包共8个文件包含1个HTML页面、1个CSS样式表、2个JavaScript脚本、3张PNG图片和1个MP3音频整体约524KB涵盖页面结构、样式控制、烟花动画逻辑与背景音效素材。页面实现了逐行打印文字、随机变色、玫瑰花飘落、夜空背景以及按钮触发烟花动画与音乐播放等效果文字内容、颜色与字体均可自行修改便于个性化定制。目前已有5716人学习下载适合在情人节、纪念日或生日等场景直接使用也能帮助读者理解前端动画与交互的基本组织方式。1. 从一份“交得出手”的 520 礼物说起HTML/CSS/JS 表白页到底要解决什么每年五月中旬总有人来问同一个问题想用 HTML、CSS 和 JavaScript 写一个 520 表白页面但网上搜到的代码要么是一屏飘心、要么是满屏弹窗跑起来像十年前的网页送出去自己都不好意思。这个需求看着轻实际卡点很具体——它既要“浪漫”又要“能跑”还得在对方手机上一秒打开、不白屏、不乱码。这套方案就是围绕这三个约束搭的用纯前端三件套做一个可交付的表白页面包含开场动画、文字逐字浮现、爱心粒子背景、时间线回忆和结尾互动按钮适合学生当课程设计交、也适合想认真做一份 520 礼物的人直接改内容上线。下面按需求、设计、实现、避坑、验收的顺序讲透你照着改文案和配色就能用。2. 需求拆解与技术选型为什么不用框架纯三件套反而更稳2.1 先把“浪漫”翻译成可验收的功能点很多人一上来就写代码写到一半发现不知道还差什么。我一般会先把感性需求拆成能打勾的清单这份清单同时也是后面验收的依据功能模块用户看到的效果技术落点验收标准开场加载黑屏渐入一行字再进入主页面CSS 动画 定时器1.5 秒内完成无闪烁爱心粒子背景满屏爱心缓慢上升、轻微摆动Canvas 2D 绘制循环60 帧附近手机不发烫逐字文案表白文字一个字一个字出现JS 定时器 字符串切片可跳过刷新可重播回忆时间线几张卡片按顺序滑入CSS transform 滚动监听滚动到即触发不重复触发结尾互动一个按钮点了有回应事件监听 状态切换点击有明确反馈不报错移动端适配手机上排版不乱、字不挤媒体查询 相对单位375px 宽度下无横向滚动这张表的价值在于它把“好看”这种没法验收的东西换成了“1.5 秒内完成”“375px 无横向滚动”这种能当场测的指标。做毕设或课设时这张表直接就是需求分析章节的骨架做礼物时它保证你不会漏掉某个环节导致对方打开是一片空白。2.2 技术选型纯 HTML/CSS/JS 的三个理由选型这块我踩过坑。早年有人用某个前端框架做表白页本地跑得好好的发给对方打开是白屏——因为对方网络环境加载不到依赖或者构建产物路径写错。纯三件套没有这个问题一个 HTML 文件、一个 CSS 文件、一个 JS 文件双击就能开扔到任何静态托管上都能跑。具体理由有三条。第一是零依赖。没有 npm、没有构建、没有 CDN 外链断网也能打开。表白这种场景对方可能在地铁上、可能网络很差任何外部依赖都是风险。第二是可读可改。收到代码的人如果懂一点前端打开就能看懂结构改文案、换配色都是几分钟的事。用框架反而把简单事情复杂化了。第三是性能可控。爱心粒子用 Canvas 画比用几十个 DOM 元素做动画省得多。DOM 动画在低端手机上掉帧是常态Canvas 只画一张位图压力小一个量级。提示如果你的课程设计明确要求使用某个框架那按课程要求来如果只是“用前端技术做一个页面”纯三件套是交付风险最低的选择。2.3 目录结构与文件职责动手前先把文件结构定下来后面所有代码都往里填不会越写越乱love-page/ ├── index.html # 页面骨架只放结构不写样式和逻辑 ├── css/ │ └── style.css # 全部样式、动画关键帧、媒体查询 ├── js/ │ ├── particles.js # 爱心粒子背景独立成文件方便调参 │ └── main.js # 逐字文案、时间线、按钮交互 └── assets/ └── (可选图片) # 回忆照片没有就用纯色卡片这个结构对应一个原则结构、样式、行为分离。index.html 里不出现style...style.css 里不出现document.querySelectormain.js 里不拼 HTML 字符串。分离之后改配色只动 CSS改文案只动 JS 里的配置对象互不干扰。很多网上抄来的代码把三者混在一个文件里改一个颜色要翻半天这就是没分层的代价。3. 总体设计与视觉动线一屏一屏把情绪推上去3.1 页面分屏结构与情绪节奏表白页不是信息页它的核心是节奏。我一般把整页分成四屏每屏承担一个情绪任务第一屏开场黑底一行字淡入制造“要发生什么”的期待停留 1.5 秒左右自动过渡。第二屏主表白爱心粒子背景 逐字浮现的表白文案这是情绪高点停留时间最长。第三屏回忆时间线几张卡片依次滑入把抽象的爱意落到具体的事上情绪从高点缓下来。第四屏互动结尾一个按钮点击后出现回应文案或跳转到一个小彩蛋给整页一个收束。这个结构的关键是“先扬后缓再收”。如果四屏全是满屏飘心对方看十秒就腻了如果全是文字又太干。节奏感是这份方案和网上随手抄的代码最大的区别。3.2 配色与字体两套方案直接选配色不用纠结给两套现成的方案背景主文字强调色适合场景暗夜玫瑰#0d0d12#f5e6ea#ff4d6d晚上发、氛围感强奶油暖阳#fff8f0#3a2e2a#e8637a白天发、清爽不腻字体上中文用系统默认字体栈即可不要引入网络字体——又是一条外部依赖。标题可以适当加大字重和字间距正文行高给到 1.8这是中文长文案在手机上读起来舒服的经验值。强调色只用在按钮和关键句上全页出现强调色的地方不超过三处多了就廉价。3.3 移动端优先的布局策略这份页面的真实打开场景九成是手机所以布局按移动端优先来写。所有尺寸用rem或vw容器最大宽度限制在 640px 并居中这样在电脑上打开也不会拉成一条。媒体查询只需要处理一个断点宽度大于 768px 时把字号和间距整体放大一档。具体写法在下一章的 CSS 里给。注意不要用100vh做全屏高度手机浏览器地址栏收起展开会导致高度跳变用100dvh或者min-height: 100vh配合overflow控制更稳。4. 核心模块实现粒子、逐字文案与时间线的可复用代码4.1 Canvas 爱心粒子一个绘制循环搞定背景粒子背景是整页最出效果的部分也是最容易写崩的部分。核心思路维护一个粒子数组每个粒子有位置、速度、大小、透明度每帧清屏后重绘粒子飘出屏幕就从底部重新生成。爱心形状用参数方程画比贴图片清晰且省资源。// js/particles.js const canvas document.getElementById(heart-bg); const ctx canvas.getContext(2d); let particles []; const COUNT 40; // 粒子数量手机建议 30-50太多会掉帧 function resize() { canvas.width window.innerWidth; canvas.height window.innerHeight; } // 用参数方程画爱心size 控制大小 function drawHeart(x, y, size, alpha) { ctx.save(); ctx.translate(x, y); ctx.scale(size / 20, size / 20); ctx.beginPath(); for (let t 0; t Math.PI * 2; t 0.05) { const px 16 * Math.pow(Math.sin(t), 3); const py -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); t 0 ? ctx.moveTo(px, py) : ctx.lineTo(px, py); } ctx.closePath(); ctx.fillStyle rgba(255, 77, 109, ${alpha}); ctx.fill(); ctx.restore(); } function createParticle() { return { x: Math.random() * canvas.width, y: canvas.height Math.random() * 100, // 从屏幕下方生成 size: 8 Math.random() * 14, speed: 0.3 Math.random() * 0.7, alpha: 0.2 Math.random() * 0.5, sway: Math.random() * Math.PI * 2 // 摆动相位 }; } function loop() { ctx.clearRect(0, 0, canvas.width, canvas.height); particles.forEach((p, i) { p.y - p.speed; p.sway 0.01; p.x Math.sin(p.sway) * 0.4; // 左右轻微摆动 if (p.y -50) particles[i] createParticle(); // 飘出后重生 drawHeart(p.x, p.y, p.size, p.alpha); }); requestAnimationFrame(loop); } resize(); particles Array.from({ length: COUNT }, createParticle); loop(); window.addEventListener(resize, resize);这段代码有三个设计点值得说。第一COUNT是性能阀门手机上 30 到 50 个粒子足够超过 80 个低端机就开始掉帧这是实测出来的经验值不是拍脑袋。第二粒子飘出屏幕后不是删除而是重置位置避免数组频繁增删带来的内存抖动。第三爱心用参数方程逐点连线t的步长 0.05 是精度和性能的折中步长再小曲线更圆滑但计算量翻倍肉眼几乎看不出差别。参数怎么调想要更“密”的氛围就加COUNT想要更“飘”就减小speed上限想要更“淡”就压低alpha上限。改完刷新即可不需要重新构建。4.2 逐字文案定时器 可跳过设计逐字浮现的文案是情绪高点实现不难难在“可跳过”。对方如果没耐心等一个字一个字蹦完会烦所以必须给一个跳过入口。// js/main.js 片段 const CONFIG { text: 从认识你的那天起我的代码里就多了一个常量叫喜欢。, speed: 120, // 每个字的间隔毫秒数 startDelay: 800 // 进入第二屏后延迟多久开始 }; const target document.getElementById(typing-text); let timer null; let index 0; function type() { if (index CONFIG.text.length) return; target.textContent CONFIG.text[index]; timer setTimeout(type, CONFIG.speed); } function skip() { clearTimeout(timer); target.textContent CONFIG.text; // 一次性补全 } setTimeout(type, CONFIG.startDelay); document.getElementById(skip-btn).addEventListener(click, skip);逻辑说明CONFIG把文案和节奏抽成配置改内容只动这一个对象不用翻代码。speed给 120 毫秒是中文阅读的舒适区间太快像报错太慢像卡顿。skip函数先清定时器再补全文本两步缺一不可——只补文本不清定时器会出现“补全后又从头蹦”的经典翻车。跳过按钮建议做成半透明小字放在角落不抢主文案的视觉。4.3 回忆时间线滚动触发与防重复时间线用 CSS 做滑入动画JS 只负责“什么时候加类名”。这里用IntersectionObserver比监听scroll事件干净得多不用自己算滚动位置。// 滚动到卡片时加 show 类触发 CSS 过渡 const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(show); observer.unobserve(entry.target); // 触发一次就解绑防止反复触发 } }); }, { threshold: 0.2 }); // 卡片露出 20% 就触发 document.querySelectorAll(.timeline-card).forEach((el) observer.observe(el));配套的 CSS 过渡这样写.timeline-card { opacity: 0; transform: translateY(40px); transition: opacity 0.6s ease, transform 0.6s ease; } .timeline-card.show { opacity: 1; transform: translateY(0); }threshold: 0.2的含义是卡片露出两成才触发太早触发动画在屏幕外就播完了太晚又显得迟钝。unobserve那行是防重复的关键不加的话卡片上下滚动会反复播放像卡带。时间线卡片的内容建议三到四张每张一句话加一个日期多了对方看不完。4.4 结尾互动按钮状态切换而不是弹窗结尾按钮不要用alert弹窗在手机上又丑又打断。正确做法是按钮点击后原地切换文案和样式const btn document.getElementById(final-btn); const reply document.getElementById(reply-text); let clicked false; btn.addEventListener(click, () { if (clicked) return; // 防连点 clicked true; btn.textContent 收到啦; btn.classList.add(done); reply.textContent 那以后的日子也一起写下去吧。; reply.classList.add(show); });clicked标志位是防连点的后悔药没有它手快的人点两下会触发两次状态切换文案错乱。按钮的done类可以把背景从强调色改成描边样式给一个“已完成”的视觉反馈。这段代码短但它是整页的收束点值得单独打磨。5. 避坑与常见问题排查五个最容易翻车的地方5.1 现象手机上打开一片空白电脑上正常原因通常是路径问题。本地双击打开时用的是file://协议相对路径能解析但上传到静态托管后如果 HTML 里写的是绝对路径或者大小写不一致的文件名就会 404。解决所有引用统一用相对路径文件名全小写上传后按 F12 看 Network 面板有没有红色请求。这是血泪经验我见过太多人卡在这一步以为代码写错了。5.2 现象爱心粒子在低端手机上卡成幻灯片原因有两个粒子数量过多或者每帧都在创建对象。解决把COUNT降到 30检查loop里有没有在循环内new对象或拼接字符串。另外requestAnimationFrame在页面切到后台会自动暂停这是好事不用管但如果用了setInterval做动画切后台还在跑回来就卡顿务必换成requestAnimationFrame。5.3 现象逐字文案刷新后不重播或者重播时叠字原因是target.textContent 在重播前没有清空。解决重播逻辑里先target.textContent 再重置index 0并且清掉旧的定时器。叠字问题九成是定时器没清干净两个type循环同时在跑。5.4 现象页面在 iOS 上滚动卡顿、动画撕裂原因是用了height: 100vh或者对大量元素做了box-shadow动画。解决全屏高度改用100dvh动画只对transform和opacity做这两个属性走 GPU 合成不触发重排。给粒子 canvas 加will-change: transform也能帮上忙但别滥用加多了反而占显存。5.5 现象发给对方对方说“打不开”或“乱码”原因是编码或分享方式。解决HTML 头部必须有meta charsetUTF-8文件保存为 UTF-8 无 BOM 格式。分享时不要直接发 HTML 文件让对方下载很多聊天工具会改后缀而是部署到静态托管给一个链接或者打包成 zip 说明解压后打开 index.html。这一步是交付的最后一公里别栽在这。6. 验收与答辩怎么证明这份表白页“做完了”验收这件事学生和从业者的标准不一样但方法可以统一拿一张检查表逐项当场演示。下面这张表就是我一般用来收尾的左边是检查项右边是操作和判定标准答辩时照着走一遍评委问不倒你。检查项操作判定标准首屏加载清缓存后打开链接3 秒内出现开场文字无白屏动画流畅度手机录屏 10 秒无明显掉帧粒子不卡顿逐字文案等待完整播放一次文字完整、无叠字、无乱码跳过功能播放中点跳过立即补全不再继续蹦字时间线触发上下滚动三次每张卡片只滑入一次结尾按钮连续点击五次只响应一次文案正确移动端适配375px 宽度查看无横向滚动条文字不溢出断网可用断网后本地打开页面完整功能正常答辩时还有一个技巧主动讲一个你踩过的坑和怎么解决的。比如“粒子数量一开始设了 120低端机掉帧后来压到 40 并改成对象复用”这种细节比背功能列表有说服力得多因为它证明你真的跑过、调过。评委最怕听到的是“这个功能实现了”却说不清怎么实现的。代码交付前我习惯把CONFIG对象里的文案、颜色、粒子数集中检查一遍确保没有残留的测试文字和写死的调试颜色。从那以后我每次交付这类页面都强制走一遍上面这张表加一次真机录屏因为电脑上看着完美、手机上翻车的例子实在太多了。希望这份方案能帮你把 520 这份礼物稳稳地送出去也帮你的课程设计拿到一个体面的分数。本文还有配套的精品资源点击获取
