★ FEATURED ARTICLE 简介面向想要用创意方式表达爱意的开发者和情侣这是一份使用前端三件套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 typemodule里再用file://协议直接打开本地 HTML浏览器会因为跨域限制拦截模块加载页面一片空白。这不代表绝对不能用而是说你要么把脚本都写在普通script标签里要么把代码合成一个文件。所以做这种页面我一般默认所有 JS 写成普通脚本不拆模块不依赖构建保证在任何环境下双击都能跑。这个选择也影响资源加载策略为了速度CSS 直接写在style里JS 写在/body前面或defer加载所有图片、音频优先考虑内联成 base64。表白按钮点到的那一刻任何外部请求的失败都可能毁掉气氛所以在本地资源上做到自包含是这个场景里优先级最高的决定。3. 用原生三件套手写一版 520 表白页面HTML CSS JS 完整实现3.1 先立骨架HTML 最小结构先搭一个能在浏览器里跑起来的最小页面。这一段只负责把元素摆好不做任何样式和逻辑。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / meta nameviewport contentwidthdevice-width, initial-scale1.0 / title一份写给你的页面/title style /* CSS 在 3.2 节加入 */ /style /head body !-- 背景画布爱心雨画在这层 -- canvas idheartRain/canvas !-- 前景内容层 -- main classstage h1 classheartbeat520/h1 p classsubtitle idtypewriter/p button idstartBtn点开这份心意/button div classmessage idmessageBox hidden p idloveWords/p p classsign—— 写代码的人/p /div /main script // JS 在 3.3 节加入 /script /body /html这个骨架里最有价值的是hidden属性表白正文一开始不可见等按钮点击后再显示制造“打开前只有一颗心和一句话”的悬念。canvas放在body最前面而不是最后是因为它做背景层DOM 顺序靠前搭配position: fixed可以安稳垫底。langzh-CN和meta charsetUTF-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 charsetUTF-8没写浏览器用默认编码猜猜错了就乱码。解决在编辑器状态栏确认保存编码为 UTF-8Visual Studio Code 里点右下角编码按钮选择“通过编码保存”再选 UTF-8同时保证head的第一行就写meta charsetUTF-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、新浏览器用100dvhhtml, 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 srcD:\project\script.js绑定了本机路径对方电脑上没有这个路径自然全部失败。另一个常见原因是引用了外部在线资源CDN 字体、在线图标库对方网络环境访问不到页面表现就是文字变样、图标全空、脚本不执行。解决交付前把资源全部内联CSS 写进styleJS 写进script音频转 base64。如果资源确实太大必须外置把 HTML、CSS、JS、音频放在同一个文件夹里用相对路径引用发送时整个文件夹压缩提醒对方解压后再打开。部署到静态托管后用无痕窗口打开检查 Network 面板确保没有(failed)或failed to load resource。这个坑我在一个活动大屏演示上踩过一次现场电脑没网、页面用了 CDN 字体等了十几秒才显示从此凡是要拿出手的页面一律零外链。6. 把代码变成个人专属参数调优、随机数与一段手写后记6.1 六个最值得调的参数页面跑通只是第一步真正让对方觉得“这是专门为我做的”靠的是把默认参数调成有呼吸感的节奏。下面这份参数表是我调过多个版本后常用的基准值按这个区间微调基本不会出错。参数推荐值范围调整方向心跳动画时长0.9 ~ 1.2 秒越短越急促适合表白进行中越长越舒缓适合结尾页打字机速度80 ~ 120 毫秒/字超过 150 毫秒会让人等得焦虑爱心大小14 ~ 40 像素小尺寸做背景雨大尺寸做高潮爆发爱心下落速度1.5 ~ 4 像素/帧慢速营造氛围快速制造情绪高潮背景渐变时长10 ~ 15 秒12 秒是多数人觉得“刚刚好”的值背景音乐音量0.3 ~ 0.5音乐是陪衬文字是主角判断调得好不好有一个简单标准把视线从屏幕移开用余光感受页面——如果它像一个人在呼吸就对了如果像屏幕保护程序在跑就说明节奏太快或太规律。每次只改一个参数刷新看效果不要一次改三四个否则出了问题你不知道是哪一项引起的。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 字体在没有外网的环境下等了十几秒才出来底下人已经掏出手机开始刷了。那次之后所有要拿出手的页面我都坚持零外链、单文件、本地自包含。这个教训换来的习惯让我后来在不少人面前都显得很“稳”其实只是因为栽过一次。希望帮到你。本文还有配套的精品资源点击获取
阅读完成 · 觉得有帮助？
