简介：面向想要用创意方式表达爱意的开发者和情侣，这是一份使用前端三件套（HTML、CSS、JavaScript）编写的表白代码，解决如何用动态视觉效果传递心意的问题。页面包含逐行打字、文字变色、玫瑰飘落、夜空背景和互动烟花等特效，营造浪漫惊喜。压缩包共8个文件，含HTML页面、CSS样式、JS交互脚本、MP3烟花音效及3张PNG装饰图，整体仅524KB，轻量易运行；代码结构清晰，关键特效模块独立，方便二次开发。无需安装插件，现代浏览器打开即可浏览，按需修改文字、颜色和字体就能个性化定制；按钮触发烟花与背景音乐的设计，也避开了浏览器自动播放限制，适合直接部署分享。目前已有5712人学习，无论作为情人节、纪念日或生日的特别礼物，还是作为前端初学者学习动画与交互的实用范例，都能从中获得可落地的浪漫创意和编码启发。

1. 520 程序员表白页面：一段网页代码为什么比一束花更打动人

某年 520 前夜，一位同事在加班间隙想表白，花店已经关门，他打开编辑器写了半小时，把一个 HTML 文件发到对方手机上。对方点开，页面是深蓝色渐变背景，一颗心在屏幕中央一下一下地跳，点按钮后满屏爱心往下落，配着打字机一句一句蹦出来的情话。后来他们在一起了，那份代码他一直留着改成了结婚请帖背景。这个标题说的就是这件事：用 HTML、CSS 和 JavaScript 写一个浏览器里直接能打开的浪漫页面，不依赖服务器、不依赖框架、不需要安装任何东西，一个文件拿到手就能用。适合给在乎的人准备一个特别瞬间的程序员，也适合刚学完前端三件套、想做一个拿得出手的小作品的新手。

2. 表白页面三件套：HTML、CSS、JavaScript 各自该管哪一段

2.1 结构、样式、行为的分工：舞台、灯光与剧本

做表白页面先别急着写代码，把三样东西的边界划清楚，后面改起来才不痛苦。我用一个类比：HTML 是舞台，负责把“有什么东西”摆明白——标题、按钮、文案、画布；CSS 是灯光和布景，负责这些东西长什么样、怎么动——渐变色、心跳动画、字体、间距；JavaScript 是剧本和演员，负责什么时候发生什么——点按钮之后开始打字、爱心开始下落、音乐开始播放。

这三层在代码里对应三个文件，也可以写在一个 HTML 文件里用<style>和<script>包裹。新手阶段我建议先分开写，因为排查问题的时候能迅速定位：颜色不对去 CSS 里找，按钮点了没反应去 JS 里找，少了个元素去 HTML 里找。等页面调通、确定要发给别人的时候，再把三个文件合成一个，减少对方打开时的路径问题。

有个细节容易忽略：元素之间的层叠关系。大部分表白页面用整屏 canvas 做背景，上面盖透明的内容层，最上面放按钮和文案。三个层靠 CSS 的position和z-index控制顺序，canvas 固定在最底层，内容层用pointer-events: none让鼠标穿透，按钮单独一个层保持可点击。如果这些不设对，会出现“爱心在文字上面飞”“按钮点不到”这种看起来很玄学的问题，其实只是 z-index 没管好。

2.2 为什么不用框架和构建工具：双击能跑比工程化更重要

常见做法是用原生三件套，不引 React、Vue，也不走打包流程。原因很实际：表白页面的核心诉求是“对方打开就能看”，不是“代码可维护性”。原生 HTML 文件你可以直接拖进浏览器跑，也可以通过聊天软件发给对方，对方在手机里点一下就能看；而框架写出来的源码要么需要启动开发服务器，要么需要先构建出产物，对一个只想过一个浪漫晚上的人来说，这套工程流程太重，而且引入外部 CDN 意味着断网就白屏，这在表白现场是最不该发生的。

真正限制你用新语法的是一个容易被忽略的坎：ES Module。如果写在<script type="module">里，再用file://协议直接打开本地 HTML，浏览器会因为跨域限制拦截模块加载，页面一片空白。这不代表绝对不能用，而是说你要么把脚本都写在普通<script>标签里，要么把代码合成一个文件。所以做这种页面我一般默认：所有 JS 写成普通脚本，不拆模块，不依赖构建，保证在任何环境下双击都能跑。

这个选择也影响资源加载策略：为了速度，CSS 直接写在<style>里，JS 写在</body>前面或defer加载，所有图片、音频优先考虑内联成 base64。表白按钮点到的那一刻，任何外部请求的失败都可能毁掉气氛，所以在本地资源上做到自包含，是这个场景里优先级最高的决定。

3. 用原生三件套手写一版 520 表白页面：HTML + CSS + JS 完整实现

3.1 先立骨架：HTML 最小结构

先搭一个能在浏览器里跑起来的最小页面。这一段只负责把元素摆好，不做任何样式和逻辑。

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>一份写给你的页面</title> <style> /* CSS 在 3.2 节加入 */ </style> </head> <body> <!-- 背景画布：爱心雨画在这层 --> <canvas id="heartRain"></canvas> <!-- 前景内容层 --> <main class="stage"> <h1 class="heartbeat">520</h1> <p class="subtitle" id="typewriter"></p> <button id="startBtn">点开这份心意</button> <div class="message" id="messageBox" hidden> <p id="loveWords"></p> <p class="sign">—— 写代码的人</p> </div> </main> <script> // JS 在 3.3 节加入 </script> </body> </html>

这个骨架里最有价值的是hidden属性：表白正文一开始不可见，等按钮点击后再显示，制造“打开前只有一颗心和一句话”的悬念。canvas放在body最前面而不是最后，是因为它做背景层，DOM 顺序靠前搭配position: fixed可以安稳垫底。lang="zh-CN"和meta charset="UTF-8"必须写，不然中文在部分浏览器里会出现乱码风险。

3.2 让背景和心跳自己动：CSS 动画与关键参数

页面能不能在第一眼抓住人，取决于前几秒的动效。这一版用两种动效：背景渐变色缓慢流动，让人感觉整个画面在呼吸；标题 520 用scale做心跳缩放。核心代码如下。

* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; overflow: hidden; } body { display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #1a1a2e, #16213e, #0f3460); background-size: 300% 300%; animation: gradientFlow 12s ease infinite; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; } /* 背景渐变在 12 秒内循环流动一次 */ @keyframes gradientFlow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .heartbeat { font-size: clamp(64px, 12vw, 120px); color: #ff4d6d; text-shadow: 0 0 30px rgba(255, 77, 109, 0.6); animation: heartbeat 1.1s ease-in-out infinite; transform-origin: center; user-select: none; } /* 心跳节奏：两下快收缩，一下慢恢复 */ @keyframes heartbeat { 0%, 100% { transform: scale(1); } 30% { transform: scale(1.15); } 45% { transform: scale(1.0); } 60% { transform: scale(1.15); } 75% { transform: scale(1.0); } } #heartRain { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .stage { position: relative; z-index: 1; text-align: center; pointer-events: none; } #startBtn { pointer-events: auto; margin-top: 24px; padding: 12px 36px; border: 2px solid #ff4d6d; border-radius: 40px; background: transparent; color: #ff4d6d; font-size: 18px; cursor: pointer; transition: all 0.3s ease; } #startBtn:hover { background: #ff4d6d; color: #fff; box-shadow: 0 0 24px rgba(255, 77, 109, 0.5); }

animation的时长和缓动函数是两个最主要的调参对象。gradientFlow用 12 秒是因为 6 秒太急促、视觉上让人不安，20 秒又慢到看不出变化，12 秒正好是“有流动感但不抢注意力”的节奏。心跳动画用ease-in-out而不是linear，因为心脏收缩和舒张本来就是先快后慢，linear出来会像机械运动。关键帧里 30% 和 60% 各放大一次，模拟真实心跳的“咚哒—咚哒”两连跳，单次放大反而像呼吸不像心跳。

值得说明的一点：所有动画都是transform和background-position，没有动width、top、margin，这是保证动画不掉帧的基础。clamp(64px, 12vw, 120px)让标题字号在不同屏幕宽度下自动缩放，省掉了后面再写一堆媒体查询。

3.3 点击按钮后发生什么：JS 打字机与爱心雨

接下来是这段代码的灵魂：点击按钮后，按钮消失，打字机开始逐字输出情话，同时爱心从屏幕上方飘落。整个过程用requestAnimationFrame驱动，不用setInterval是因为动画帧循环能自动匹配屏幕刷新率，在 60Hz 和 120Hz 的设备上都能保持流畅。

const btn = document.getElementById('startBtn'); const stage = document.querySelector('.stage'); const typewriterEl = document.getElementById('typewriter'); const messageBox = document.getElementById('messageBox'); const loveWords = document.getElementById('loveWords'); // ---- 恋爱文案区：改这里就能改成你自己的话 ---- const LOVE_TEXT = '我想和你一起看四季，也想和你一起写余生的代码。'; const DIALOGUE = '认识你之前，世界是黑白的；\n认识你之后，连报错都变得可爱。'; // --------------------------------------------- // ---- 打字机 ---- let typeIndex = 0; function startTypewriter(text) { return new Promise(resolve => { typewriterEl.textContent = ''; typeIndex = 0; const timer = setInterval(() => { typewriterEl.textContent = text.slice(0, ++typeIndex); if (typeIndex >= text.length) { clearInterval(timer); resolve(); } }, 100); // 打字速度：100ms/字 }); } // ---- 爱心雨（canvas 实现）---- const canvas = document.getElementById('heartRain'); const ctx = canvas.getContext('2d'); let hearts = []; let raining = false; function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; } class Heart { constructor() { this.x = Math.random() * canvas.width; this.y = -20 - Math.random() * canvas.height * 0.3; this.size = 14 + Math.random() * 26; // 爱心大小 14~40px this.speed = 1.5 + Math.random() * 2.5; // 下落速度 1.5~4px/帧 this.opacity = 0.6 + Math.random() * 0.4; this.sway = Math.random() * Math.PI * 2; } update() { this.y += this.speed; this.sway += 0.03; this.x += Math.sin(this.sway) * 0.8; if (this.y > canvas.height + 40) { this.y = -20; this.x = Math.random() * canvas.width; } } draw() { ctx.save(); ctx.font = `${this.size}px "Segoe UI Emoji", "Apple Color Emoji", sans-serif`; ctx.textAlign = 'center'; ctx.globalAlpha = this.opacity; ctx.fillText('❤', this.x, this.y); ctx.restore(); } } function spawnHearts(count) { for (let i = 0; i < count; i++) { hearts.push(new Heart()); } } function animateRain() { if (!raining) return; ctx.clearRect(0, 0, canvas.width, canvas.height); hearts.forEach(h => { h.update(); h.draw(); }); requestAnimationFrame(animateRain); } // ---- 点击后的完整流程 ---- btn.addEventListener('click', async () => { btn.style.display = 'none'; raining = true; spawnHearts(30); // 初始一次性生成 30 颗 animateRain(); await startTypewriter('遇见你之后，我的每个 if 都充满了意义。'); messageBox.hidden = false; loveWords.textContent = DIALOGUE; typewriterEl.style.display = 'none'; // 正文出现后再补 80 颗爱心，形成一波动效小高潮 spawnHearts(80); window.addEventListener('resize', resizeCanvas); resizeCanvas(); }); // 页面初始化：等宽高算好再画 window.addEventListener('load', resizeCanvas);

这段代码的关键逻辑是流程编排：用async/await把“打字机播完”和“正文出现”串起来，避免用嵌套回调导致时序混乱。class Heart的内部状态只有位置、大小、速度和摆动相位，所有属性都在构造时随机化，update()改变位置并做上下循环复用，爱心滚出底部就回到顶部，整场雨不会停也不会越积越多。

几个值得调的参数：100ms/字是打字机节奏，太快读不清，太慢对方等得着急；爱心大小 14~40px，小于 14px 在手机上看不清，大于 40px 会挡住文字；下落速度 1.5~4px/帧，配合 60Hz 屏，一颗爱心从顶部飘到底部大约 3~5 秒，这个速度最接近“浪漫飘落”而不是“暴雨砸脸”。spawnHearts(30)和后续的spawnHearts(80)是节奏设计：按钮点击后先来一波小雨制造氛围，文案全部展示后再来一波大的，给视觉一个高潮点。

4. 从“能打开”到“能表白成功”：音乐、触屏与真机适配怎么补

4.1 背景音乐与音效：绕过自动播放拦截的正解

到了进阶阶段，你大概率想加背景音乐。这里有一个所有前端都会撞上的规则：现代浏览器不允许网页在没有任何用户手势的情况下自动播放带声音的音频。也就是说<audio autoplay>在手机上基本会被拦，控制台会报NotAllowedError。

正解不是去骗浏览器，而是顺着交互流程走：把音乐播放挂在按钮点击这个用户手势里，这既符合浏览器策略，也符合表白页面的节奏——对方点下“点开这份心意”的那一瞬间，音乐刚好响起，气氛是连贯的。

const bgm = new Audio('bgm.mp3'); bgm.loop = true; bgm.volume = 0.4; btn.addEventListener('click', async () => { // 用户手势内调用 play，才不会被拦截 bgm.play().catch(() => { // 如果仍然失败，静音播放再提示用户主动开启 bgm.muted = true; bgm.play(); }); // 后续逻辑... });

代码说明：第一行bgm.play()在click回调里调用，浏览器允许这个时机发声。如果资源加载慢导致播放失败，.catch里先静音播放，把失败吞掉，避免控制台红字打断气氛。volume = 0.4是因为背景音乐不是主角，音量压过低才不会盖过文案阅读。实际做的时候建议用短促的纯音乐循环，长度 20~40 秒，文件大小控制在 300KB 以内，可以用压缩工具把 MP3 码率压到 64kbps。

4.2 移动端适配：尺寸、触屏与视口高度的三个坑

绝大多数表白场景，对方是在手机上点开你发的链接或文件，所以触屏体验比桌面端更重要。第一步是监听resize重新设置 canvas 尺寸，否则旋转屏幕后画布会失真；第二步是用clamp()和vw/vh单位代替固定像素，让文字和按钮在任何屏幕宽度下都保持合理比例。

window.addEventListener('resize', () => { canvas.width = window.innerWidth; canvas.height = window.innerHeight; });

.message { padding: 0 clamp(20px, 5vw, 60px); font-size: clamp(16px, 3.2vw, 22px); line-height: 1.8; white-space: pre-line; }

触屏上的第二个坑是click事件在部分老版移动端浏览器有 300ms 延迟，按下到触发会有肉眼可感知的等待。现代浏览器已经修复，但如果你在页面里做了双击检测或长按手势，就必须留意事件冲突。稳妥的写法是给主按钮同时绑touchstart和click，然后用preventDefault()防止重复触发。

视口高度是第三个坑，会在第 5 章展开讲，这里先说结论：100vh在移动端不等于你看到的屏幕高度，因为地址栏和底部工具栏会伸缩。布局时优先用100dvh（动态视口高度），没有支持的浏览器再降级回100vh。

4.3 分享与交付：单文件还是静态托管

页面做好之后，交付形态是最后一个关键决策。我一般按两个场景来选：如果只是发给一个人在手机上点开，做成单文件 HTML 最可靠——把 CSS 和 JS 全部内联进去，用聊天软件发送即可，对方离线也能打开。如果要在朋友圈、群聊里分享，单文件在部分社交应用的预览体验不稳定，这时可以放到一个静态托管服务上，拿到一个链接，点开即用。

单文件做法里最麻烦的是音频和图片：外链文件对方接收后路径可能失效，所以我倾向于把小的 MP3 和图片转成 base64 内嵌进 HTML。base64 会让文件体量增加约 33%，一段 300KB 的音乐转码后约 400KB，配合压缩后的 CSS/JS，整个页面控制在 500KB 以内是可接受的。注意音频转 base64 后体积变大，加载时会阻塞页面解析，所以不要放在<head>里，而是等window.load事件后再初始化Audio对象。

如果走静态托管路线，常见做法是把 HTML、CSS、JS 拆开部署，音频和图片用相对路径引用。注意检查 MIME 类型：.mp3要返回audio/mpeg，.js要返回text/javascript，配置错误会表现为“图片裂开、音乐加载失败、脚本不执行”。部署完先用无痕窗口打开一次，模拟对方第一次访问的环境，再检查 Network 面板里有几个红色请求。

5. 表白代码避坑清单：5 个高频翻车点的现象、原因与解决

5.1 中文全部变成乱码

现象：打开页面，标题和情话全是“温暖”之类的乱码，尤其在使用 Chrome 打开本地 HTML 时最容易出现。

原因：编辑器保存文件时用了非 UTF-8 编码，比如 GBK，而 HTML 头部声明的是 UTF-8，两边不一致；另一个原因是<meta charset="UTF-8">没写，浏览器用默认编码猜，猜错了就乱码。

解决：在编辑器状态栏确认保存编码为 UTF-8，Visual Studio Code 里点右下角编码按钮选择“通过编码保存”再选 UTF-8；同时保证<head>的第一行就写<meta charset="UTF-8" />。改完重新保存，刷新浏览器即可。这个坑新手最容易踩，但一旦记住“编码必须双向一致”，之后几乎不会再犯。

5.2 动画一卡一卡的，掉了 30 帧

现象：背景渐变和爱心雨同时运行时，在普通手机上明显掉帧，点击按钮到爱心出现之间有半秒空白。

原因：动画属性用错了。对元素动画化left、top、width、height或margin，浏览器需要在每一帧重新计算布局和绘制，这个过程叫重排，开销极大；而对同一个元素同时做多个独立的 CSS 动画，也会互相抢占合成线程。canvas 的clearRect每次清屏区域过大，在高分屏上同样耗费 GPU 资源。

解决：凡是位移和缩放，一律用transform，透明度用opacity，这两个属性走 GPU 合成，不触发重排。爱心雨的下落不要用left递增，而在update()里修改this.y后通过 canvas 重绘，画布尺寸不要超过 CSS 显示尺寸。如果页面里有大面积模糊或阴影，只在静止元素上用，不要在每帧运动的元素上加filter。用浏览器 DevTools 的 Performance 面板录制 5 秒，看 FPS 是否稳定在 55 以上。

5.3 背景音乐不响，控制台一片红

现象：对方打开页面，音乐没有自动响，控制台报Uncaught (in promise) NotAllowedError。

原因：浏览器自动播放策略生效，页面没有用户手势就尝试播放带声音的音频，被浏览器直接拒绝。这是浏览器故意的设计，目的是防止用户在不知情的情况下被播放音频骚扰。

解决：把bgm.play()移入click事件回调里，确保是用户点击触发的播放。如果用户点了按钮但音乐资源还没加载完，play()返回的 Promise 会失败，所以要在.catch()里留一个兜底：等待canplaythrough事件后再尝试播放一次。另外注意audio.loop = true要在play()之前设置，否则第一遍播完会停止。从用户体验上说，这个规则不该对抗，反而是表白页面设计的一部分：对方按下按钮的那一下，就是音乐该起的时刻。

5.4 手机上底部被遮挡，页面超高

现象：在手机上打开，地址栏和底部导航栏之间出现一条空隙，或者按钮和文案被底部横条盖住；下拉刷新时页面背景和内容之间露出白边。

原因：100vh在移动端动态视口里是个陷阱。浏览器地址栏收起来时，视口高度是完整屏；地址栏展开时，可见高度只剩一部分。100vh始终按“最大视口高度”计算，导致页面内容区比真实可见区域高，底部被盖住。白边则是overflow: hidden没有应用到html和body两个元素，某个元素出了视口边界。

解决：在最外层容器上同时声明三个高度值，让老浏览器用100vh、新浏览器用100dvh：

html, body { height: 100%; overflow: hidden; } .stage { min-height: 100vh; min-height: 100dvh; }

min-height保证内容不足一屏时也能撑满，而100dvh跟随实际可视高度。还要在 JavaScript 里监听visualViewport.resize事件，动态刷新 canvas 尺寸，防止画布和页面主体错位。

5.5 发给对方直接白屏或资源全挂

现象：我这边双击 HTML 一切正常，发给对方之后打开，页面白屏，背景音乐加载不出来，图片裂开。

原因：典型的资源路径问题。代码里用了src="./bgm.mp3"但实际文件放在 D 盘某个绝对路径下，或者<script src="D:\project\script.js">绑定了本机路径，对方电脑上没有这个路径，自然全部失败。另一个常见原因是引用了外部在线资源（CDN 字体、在线图标库），对方网络环境访问不到，页面表现就是文字变样、图标全空、脚本不执行。

解决：交付前把资源全部内联：CSS 写进<style>，JS 写进<script>，音频转 base64。如果资源确实太大必须外置，把 HTML、CSS、JS、音频放在同一个文件夹里，用相对路径引用，发送时整个文件夹压缩，提醒对方解压后再打开。部署到静态托管后，用无痕窗口打开检查 Network 面板，确保没有(failed)或failed to load resource。这个坑我在一个活动大屏演示上踩过一次，现场电脑没网、页面用了 CDN 字体，等了十几秒才显示，从此凡是要拿出手的页面，一律零外链。

6. 把代码变成个人专属：参数调优、随机数与一段手写后记

6.1 六个最值得调的参数

页面跑通只是第一步，真正让对方觉得“这是专门为我做的”，靠的是把默认参数调成有呼吸感的节奏。下面这份参数表是我调过多个版本后常用的基准值，按这个区间微调，基本不会出错。

判断调得好不好有一个简单标准：把视线从屏幕移开，用余光感受页面——如果它像一个人在呼吸，就对了；如果像屏幕保护程序在跑，就说明节奏太快或太规律。每次只改一个参数，刷新看效果，不要一次改三四个，否则出了问题你不知道是哪一项引起的。

6.2 随机情话与键盘暗号：让每次打开都不一样

固定文案看多了会腻，我习惯加两个彩蛋：一个是不管打开多少次，每次展示的情话从数组里随机取一条；另一个是键盘暗号，对方如果在电脑上敲出数字520，满屏爆一次爱心，像解锁了隐藏关卡。实现方式非常简单。

const LOVE_LINES = [ '我想把所有的 if-else 都写成和你在一起。', '遇见你之后，我的每个循环都有了退出条件。', '你是我代码里唯一的注释——怕别人看不懂，更怕别人看懂。', '世界是二进制的，而你是唯一的 exception。' ]; // 随机情话：每次打开都不一样 loveWords.textContent = LOVE_LINES[Math.floor(Math.random() * LOVE_LINES.length)]; // 键盘暗号：敲出 520 触发爱心爆裂 let keyBuffer = ''; document.addEventListener('keydown', (e) => { keyBuffer += e.key; if (keyBuffer.length > 6) keyBuffer = keyBuffer.slice(-6); if (keyBuffer.includes('520')) { spawnHearts(120); keyBuffer = ''; } }); // 本地计数：打开满 520 次，显示隐藏的源文件注释 let openCount = parseInt(localStorage.getItem('loveOpenCount') || '0') + 1; localStorage.setItem('loveOpenCount', String(openCount));

keydown里维护一个长度为 6 的缓冲区，每次按键追加一个字符，超长就截断，然后检测是否包含520。用slice(-6)而不是清空，是因为用户可能连续输入一串数字，避免漏掉中间的 520。localStorage的存在让这个页面变成一个长期秘密：对方每次打开，计数累加，到 520 次时触发一段隐藏的彩蛋文案，这个惊喜可以藏很久。

6.3 交付习惯与一点私人教训

最后说一个我一直保持的习惯。交付出一个 HTML 文件之前，在 Chrome 无痕窗口里开一次，模拟“对方第一次打开”的环境；再在手机浏览器里开一次，确认触屏和视口正常；然后把文件发给另一台设备解压验证一次。这三步走完，才敢把链接或者文件发出去。某年活动大屏演示那天，我在现场才发现页面用了外部 CDN 字体，在没有外网的环境下等了十几秒才出来，底下人已经掏出手机开始刷了。那次之后，所有要拿出手的页面，我都坚持零外链、单文件、本地自包含。这个教训换来的习惯，让我后来在不少人面前都显得很“稳”，其实只是因为栽过一次。希望帮到你。

本文还有配套的精品资源，点击获取