每到五月中旬各种群里就开始冒出同一类需求帮忙弄一个520 表白网站纯HTML 前端打开就能看最好手机电脑都能跑再顺手把生日快乐代码那套效果也塞进去。这类需求看着简单实际上踩坑点密集——去年我前后帮人做过七八个版本从单文件小页面到自己写粒子引擎坑踩得足够多这里把整套思路和代码完整摊开讲一遍。这篇内容面向三类人完全没写过前端、想照着抄一份能直接用的页面的人写过后台但没怎么碰过动效的人以及已经会写 HTML、想把页面从能看做到好看的人。我不会只贴一大坨代码让你自己悟而是把每一段为什么这么写、参数怎么定、哪些地方最容易翻车都说清楚。全文用的都是原生 HTML/CSS/JavaScript没有任何构建工具复制到本地双击就能预览扔到任意静态托管上就能发出链接。1. 先把需求拆开一个表白页到底由哪些零件组成1.1 标题里的三个关键词对应三种完全不同的页面520 表白网站HTML 前端生日快乐代码这三个词放在一起其实混了三种不同的东西动手之前必须先分清否则做出来的东西四不像。表白页的核心是情绪递进它需要一个钩子首屏视觉冲击、一段叙事想说的话、一个落点一个按钮、一句话、一个日期。它更像一张会动的卡片而不是一个网站。HTML 前端限定的是技术边界不接后端、不存数据、不登录。所有内容硬编码在文件里或者写进一个 JSON 里。这个限制听起来是缺点实际上是优点——它意味着零成本部署、零维护、永远不会挂。生日快乐代码这类关键词搜出来的东西通常是打字机 蛋糕 蜡烛 彩带那一套。它的技术点和表白页高度重合只是叙事结构不同生日页是时间点触发需要在特定日期打开才有仪式感。所以我的做法是一套骨架两套皮肤。底层是同一套动效引擎粒子、打字机、滚动触发上层的文案、配色、首屏元素按场景切换。这样你做完一个另一个只需要改配置。提示别一上来就找模板下载。网上流传的很多模板带压缩混淆的 JS改一个颜色都要翻几千行最后维护成本远超自己写。1.2 技术选型为什么我坚持不用框架有人会问现在前端生态这么成熟为什么不用 Vue 或者 React 写答案很直接这个场景里框架是纯负担。一个表白页总共就三四屏内容、五六段动效状态管理需求几乎为零。引入框架意味着你要配构建工具、要打包、要处理路由哪怕只有一个路由最终产物是几百 KB 的 JS bundle而页面本身可能只有 30 KB。首屏加载时间从几乎瞬间变成要等一下而这恰恰是最致命的——打开链接的前两秒决定了对方会不会继续往下看。我的选型原则是这样的需求选择理由单页、无数据交互原生 HTML/CSS/JS零依赖单文件可分发需要多个页面切换原生 CSS 过渡用class切换即可不需要路由需要读取配置文案、日期独立config.js改文案不用碰逻辑代码需要粒子/绘图动效Canvas 2D比 DOM 动画性能高一个量级需要复杂 3D不建议手机上掉帧严重收益低最后一个我要强调一下别上 3D。我见过用 WebGL 做旋转爱心立方的版本桌面端确实炫但在一台中端安卓机上打开前五秒是黑屏。仪式感瞬间变成尴尬。1.3 兼容性基线先划死一条线再动手动手前我会先划一条兼容线这条线决定了后面能用哪些 API。我的基线是iOS 14 / Android 8 / 桌面端近三年主流浏览器。这条线往下IntersectionObserver、CSS 变量、clamp()、flex/gap全部可用dvh单位在 iOS 15.4 可用但需要降级方案。具体到这份页面上需要特别处理的只有三处100vh在移动端浏览器地址栏收起时会跳变用100dvh加100vh兜底。Audio.play()必须由用户手势触发任何进页面自动播放的方案都会被拦截。backdrop-filter在部分安卓 WebView 上不生效毛玻璃效果需要给一个纯色兜底。把这三条先想明白后面写代码就不会出现本地好好的发给对方全乱的情况。这是我踩过最多次的坑没有之一。2. 骨架与视觉把好看翻译成可执行的参数2.1 单屏分段结构比整页长滚动更稳结构上我一般用分段式单屏而不是一镜到底的长滚动。原因很实际长滚动页面在手机上很难控制节奏用户一划就滑到底动效还没播完而分段式可以精确控制每一屏进入的时机。具体做法是用几个section堆叠每个section高度设为100dvh兜底100vh配合scroll-snap-type: y mandatory让滚动自动吸附到整屏。这样对方每划一次正好停在一屏上动效刚好播完。.page { height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; } .screen { height: 100vh; height: 100dvh; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }这里有个细节值得说scroll-snap一定要挂在滚动容器上而不是body。我早期版本直接写在html, body上在 iOS Safari 里会出现吸附卡顿、回弹异常。把整个页面塞进一个.page容器后问题消失。另一个细节是scroll-snap-align: start配合scroll-padding-top。如果页面顶部有固定的导航或装饰条不加scroll-padding会导致每次吸附都偏移一截。2.2 配色三色原则与对比度下限超好看这三个字最容易被误解。好看不等于颜色多恰恰相反颜色越少越高级。我给自己定的规矩是主色、辅色、点缀色一共三个超过三个必翻车。以表白场景为例我常用的两组配色场景主色背景辅色文字点缀色高亮深色浪漫#0d0b1a#f2e9f5#ff4d7d浅色清新#fdf6f7#2b2230#e0506f深色底的好处是粒子发光效果明显粉色的爱心在近乎黑的背景上有很强的视觉冲击浅色底的好处是文字可读性天然更好适合长辈或者不喜欢暗色的接收方。对比度这块必须较真。正文文字和背景的对比度我一般控制在7:1 以上WCAG AAA 级辅助信息不低于 4.5:1。这不是为了教条而是因为手机上亮度自动调节后低对比度的浅灰文字在户外基本看不清。用浏览器开发者工具里的对比度检查器一测就知道。还有一个容易被忽略的点别用纯黑#000和纯白#fff。纯黑背景上的动效容易出现色带断层纯白背景上的粉色会显得刺眼。用#0d0b1a这种带一点紫的深色观感会柔和很多。2.3 字体与排版中文页面的隐形坑中文排版在情侣页面上其实比英文更难做好看原因是中文字体文件普遍巨大一个完整的中文字体动辄 5-10 MB直接引入会让页面加载卡死。我的处理方案分三层第一层正文用系统字体栈。-apple-system, PingFang SC, Microsoft YaHei, sans-serif这一串足够覆盖绝大多数设备加载成本为零。第二层标题用装饰性方案代替字体文件。比如用 CSS 实现描边字、渐变字、逐字上浮动画效果比换字体更抓眼球成本也低。.title { font-size: clamp(28px, 8vw, 64px); font-weight: 800; letter-spacing: 0.08em; background: linear-gradient(120deg, #ffd6e7, #ff4d7d 60%, #ffb3c9); -webkit-background-clip: text; background-clip: text; color: transparent; }第三层如果确实想要手写体自己做子集化。把文案里用到的字单独导出一个几十 KB 的字体文件而不是引入完整字体包。这一步能省下 95% 的体积。letter-spacing这个参数我特别想强调。中文默认字距偏挤标题加0.05em ~ 0.1em的letter-spacing立刻显得透气正文加0.02em就够加多了会显得散。行高用1.8左右中文比英文更需要行间距。3. 核心动效拆解心形、打字机、滚动触发3.1 心形曲线的数学来源与坐标映射满屏粒子汇聚成一颗爱心是这个场景里最经典也最有效的动效。它的核心是一条心形参数方程x 16 · sin³(t) y 13 · cos(t) - 5 · cos(2t) - 2 · cos(3t) - cos(4t)t从0走到2π就能画出完整的心形轮廓。这条方程的好处是上下对称、曲线圆润比用两段贝塞尔曲线拼出来的心形更自然。落到 Canvas 上要处理两件事。第一Canvas 的 y 轴是向下的而这套方程的 y 轴向上所以要取负号。第二方程算出来的坐标范围大约是 x ∈ [-16, 16]、y ∈ [-17, 12]得映射到画布尺寸上。function heartPoint(t) { const x 16 * Math.pow(Math.sin(t), 3); const y 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); return { x, y }; } function toCanvas(p, w, h, scale) { return { x: w / 2 p.x * scale, y: h / 2 - p.y * scale // 注意这里是减号 }; }scale这个系数怎么定我的经验值是Math.min(w, h) / 40。分母取 40 是因为心形的最大半径约等于 17乘以 2 是 34留一点边距刚好 40。如果想让爱心更饱满可以调到 36 或 34但别低于 32否则会顶到画布边缘被裁掉。坐标系这件事我多说一句你可以写一个小测试只画几个点肉眼确认一下心形是不是正着反了。我第一次做的时候直接用了结果画出来是一颗倒心还以为是方程抄错了白白排查了半个小时。3.2 粒子系统数量、缓动与性能上限有了轮廓接下来要把点变成粒子。我的做法是在心形轮廓上均匀取 N 个点每个点对应一个粒子粒子初始位置随机散布在画布上然后用缓动函数逐渐逼近目标点。粒子的缓动我用的是最简单的线性插值// p.x 当前坐标p.tx 目标坐标ease 是缓动系数 p.x (p.tx - p.x) * ease; p.y (p.ty - p.y) * ease;ease取0.04 ~ 0.08比较合适。取值太小粒子飞过来慢悠悠的观感拖沓取值太大粒子瞬间到位没有汇聚的过程。我实测0.06是个比较舒服的中间点。粒子数量是个需要权衡的参数。我给出的区间是设备类型建议粒子数说明桌面端900 ~ 1400视觉密度高观感饱满中高端手机600 ~ 900兼顾密度和帧率低端手机/老设备300 ~ 500保帧率优先判断设备能力可以用navigator.hardwareConcurrencyCPU 核心数和屏幕宽度粗略估算但更稳的办法是跑一段实时帧率采样前 60 帧统计平均帧时长如果超过 20ms即低于 50fps就自动把粒子数砍半。let frameCount 0, frameSum 0, degraded false; function loop(now) { if (frameCount 60) { frameSum now - lastTime; frameCount; if (frameCount 60 frameSum / 60 20) { particles.length Math.floor(particles.length / 2); degraded true; } } lastTime now; // ...绘制逻辑 requestAnimationFrame(loop); }还有一个性能关键点限制 devicePixelRatio。高分屏上window.devicePixelRatio可能是 3如果不做限制画布的实际像素量是逻辑像素的 9 倍填充率压力直接爆炸。我一般Math.min(dpr, 2)视觉上肉眼几乎看不出差别性能能省一半以上。3.3 打字机效果的正确写法打字机几乎是这类页面的标配但十份实现里有八份有 bug。最常见的问题是中英文混排时截断半个字符或者遇到表情符号直接变成乱码。根本原因是String的索引按 UTF-16 码元走而表情符号占两个码元代理对直接text[i]会把它劈成两半。正确的做法是先用Array.from(text)拆成字符数组再逐个追加。function typewriter(el, text, speed 90) { return new Promise(resolve { const chars Array.from(text); // 关键按字符拆不按码元 let i 0; el.textContent ; const timer setInterval(() { el.textContent chars[i]; i; if (i chars.length) { clearInterval(timer); resolve(); } }, speed); }); }speed取多少中文建议80 ~ 120ms一字太快了没仪式感太慢了让人着急。如果文案有 30 个字100ms就是 3 秒正好是一个屏住呼吸读完的节奏。如果要更有质感可以做一个变速打字标点符号后多停 200ms营造停顿感。实现上就是判断当前字符是不是。如果是就await sleep(200)再继续。这个小细节我加上之后好几个朋友专门问过为什么你的打字感觉更自然。还有一个必踩的坑光标闪烁。很多人用border-right做光标结果文字换行时光标跑到下一行左边。用::after伪元素配animation: blink 1s steps(1) infinite更稳而且可以随时用display: none关掉。3.4 滚动触发淡入与 IntersectionObserver每一屏进入视口时元素淡入上浮这个效果我用IntersectionObserver实现而不是监听scroll事件。区别在哪scroll事件触发频率极高每次都要读getBoundingClientRect()读布局属性会导致浏览器强制同步重排滚动一卡一卡的。IntersectionObserver是浏览器在合成线程里做好的判断只在元素进出视口时回调一次性能完全不在一个层级。const io new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { entry.target.classList.add(in); io.unobserve(entry.target); // 播完就取消监听 } }); }, { threshold: 0.35, rootMargin: 0px 0px -10% 0px }); document.querySelectorAll(.reveal).forEach(el io.observe(el));threshold: 0.35的意思是元素露出 35% 才触发。这个值我调过好几轮设成 0.1 太早元素刚露个头就开始动观感急躁设成 0.8 太晚用户已经看到静态内容了才动反而显得迟钝。0.3 ~ 0.4是甜区。rootMargin底部给-10%是为了让触发点稍微上移避免元素贴在屏幕最下沿时才开始动那样用户会错过动画的前半段。动画本身用 CSS 实现JS 只负责加类名.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.in { opacity: 1; transform: translateY(0); }cubic-bezier(0.22, 1, 0.36, 1)这个曲线值得记下来它前段快后段缓出来的效果是轻轻落定比默认的ease高级不少。整个页面所有过渡我都统一用这条曲线观感会非常一致。4. 完整实操从空文件夹到能发出去的链接4.1 目录结构与文件组织先说结构。我强烈建议把配置和逻辑分开哪怕只有一个页面heart-page/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── config.js ← 文案、日期、配色都在这 │ ├── heart.js ← 粒子爱心 │ └── main.js ← 页面逻辑 └── assets/ ├── bgm.mp3 └── photo.jpgconfig.js单独拎出来是这个结构的关键。它的内容是纯数据window.CONFIG { name: 小A, date: 2025-05-20, lines: [ 这是第一句话, 这是第二句话, 这是最后一句 ], theme: dark, bgm: assets/bgm.mp3, particles: auto };这样对方生日换了、想说的话换了只需要改这一个文件不用去几百行 JS 里翻。我吃过这个亏——第一次做完朋友想改个名字我在压缩过的代码里找了二十分钟。particles: auto这个设计是为了后面做设备自适应如果值是数字就强制用这个粒子数是auto就按 3.2 节的策略动态决定。4.2 HTML 结构语义化分层HTML 我只写骨架所有内容从config里填。这样结构和数据彻底解耦。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1, viewport-fitcover title给你的/title link relstylesheet hrefcss/style.css /head body main classpage !-- 第一屏首屏 -- section classscreen screen-hero canvas idheart/canvas h1 classtitle>:root { --c-bg: #0d0b1a; --c-text: #f2e9f5; --c-accent: #ff4d7d; --c-accent-soft: #ffd6e7; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.7s; --gap: clamp(16px, 4vw, 32px); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--c-bg); color: var(--c-text); font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }overflow: hidden加在body上滚动交给内部的.page这样能彻底避免移动端双滚动条的问题。-webkit-tap-highlight-color: transparent是去掉 iOS 上点击元素时的灰色闪光这个灰色块在深色背景上非常突兀。首屏有个背景光晕我用伪元素加径向渐变做比图片省得多.screen-hero::before { content: ; position: absolute; inset: -20%; background: radial-gradient( circle at 50% 45%, rgba(255, 77, 125, 0.22), transparent 62% ); pointer-events: none; }inset: -20%是为了让光晕溢出边界避免出现生硬的圆形边缘。pointer-events: none让它不挡点击这个不写会挡住下面的按钮。按钮上我给了一个轻微的呼吸动画.btn { padding: 14px 36px; border: 1px solid var(--c-accent); border-radius: 999px; background: transparent; color: var(--c-accent-soft); font-size: 16px; letter-spacing: 0.12em; animation: breathe 2.6s ease-in-out infinite; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .btn:active { background: var(--c-accent); color: #fff; } keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 125, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(255, 77, 125, 0); } }这个box-shadow扩散的呼吸效果比scale缩放更含蓄不会让布局视觉重心跳动。2.6s的周期是我反复调的1.5s太快像心跳过速4s又几乎看不出在动。4.4 JavaScript把所有动效串起来main.js的职责是编排它不实现具体动画只负责按顺序调用。这样逻辑清晰出问题也容易定位。(function () { const cfg window.CONFIG; // 1. 填充文案 document.querySelectorAll([data-line]).forEach(el { const idx Number(el.dataset.line); el.textContent cfg.lines[idx] || ; }); // 2. 首屏打字 const titleEl document.querySelector([data-typing]); typewriter(titleEl, cfg.lines[0] || 给你的, 110); // 3. 滚动触发 const io new IntersectionObserver(entries { entries.forEach(e { if (e.isIntersecting) { e.target.classList.add(in); io.unobserve(e.target); } }); }, { threshold: 0.35, rootMargin: 0px 0px -10% 0px }); document.querySelectorAll(.reveal).forEach(el io.observe(el)); // 4. 天数计算 const daysEl document.getElementById(daysNum); if (daysEl) { const start new Date(cfg.date.replace(/-/g, /)).getTime(); const now Date.now(); const days Math.max(0, Math.floor((now - start) / 86400000)); countUp(daysEl, days); } })();这里有个容易被忽略的细节new Date(2025-05-20)在部分浏览器里会被当成 UTC 时间解析导致日期偏差一天。把横杠换成斜杠2025/05/20就能强制按本地时间解析。这个坑我在跨年那次的页面上踩过显示的天数比实际少一天排查了半天。countUp是数字滚动效果从 0 递增到目标值function countUp(el, target, dur 1200) { const start performance.now(); function tick(now) { const p Math.min((now - start) / dur, 1); const eased 1 - Math.pow(1 - p, 3); // easeOutCubic el.textContent Math.floor(target * eased); if (p 1) requestAnimationFrame(tick); else el.textContent target; } requestAnimationFrame(tick); }easeOutCubic的效果是数字冲上去然后减速停住比线性递增有质感得多。最后一行el.textContent target是保险防止浮点误差让最终值少 1。4.5 背景音乐与用户交互策略背景音乐是这类页面的重点争议项。有人觉得必须有有人觉得吵。我的建议是默认静音提供一个按钮点了才播。这不是设计偏好是硬性限制。所有现代浏览器都禁止在没有用户手势的情况下调用audio.play()强行调用会抛NotAllowedError控制台一片红。正确的做法是这样const bgm new Audio(cfg.bgm); bgm.loop true; bgm.volume 0; document.getElementById(muteBtn).addEventListener(click, async (e) { const btn e.currentTarget; try { if (bgm.paused) { await bgm.play(); fadeVolume(bgm, 0, 0.6, 900); btn.classList.add(playing); } else { fadeVolume(bgm, bgm.volume, 0, 500, () bgm.pause()); btn.classList.remove(playing); } } catch (err) { console.warn(播放失败, err); } }); function fadeVolume(audio, from, to, dur, done) { const start performance.now(); function step(now) { const p Math.min((now - start) / dur, 1); audio.volume from (to - from) * p; if (p 1) requestAnimationFrame(step); else done done(); } requestAnimationFrame(step); }淡入淡出这一步很关键。直接play()会让音乐从最大音量突然炸出来尤其对方可能在安静环境里打开第一下就是惊吓。用 0.6~0.9 秒淡入体验完全不同。音量上限我建议压到0.6以下手机上外放时 1.0 的音量经常有破音。还有一个实用技巧把音频文件压到 1MB 以内。一首三分钟的完整歌曲即使是 128kbps 也有 3MB在弱网下加载会把首屏拖垮。我一般截取 30 秒高潮段落循环压到 400KB 左右效果反而更好。5. 移动端适配、性能与发布5.1 移动端最容易翻车的四个地方第一100vh跳动。手机上地址栏隐藏和显示时100vh会变化导致整屏内容跳一下。用100dvh加100vh兜底是标准解法但要注意顺序——先写100vh再写100dvh不支持的浏览器会忽略后者。第二安全区域。全面屏底部有 34px 左右的手势条区域内容压上去会被遮挡。给底部元素加padding-bottom: calc(24px env(safe-area-inset-bottom, 0px));env()的第二个参数是兜底值老浏览器不支持safe-area-inset-bottom时会取 0。第三字号过小。桌面端14px的字在手机上看会非常费劲尤其对方如果是长辈。正文我一般用clamp(15px, 4.2vw, 18px)保证小屏上也不低于 15px。第四横向溢出。加了一堆绝对定位的装饰元素后很容易出现横向滚动条。在body上加overflow-x: hidden能治标但更该做的是用开发者工具的溢出检测找出到底是哪个元素超宽了。我遇到最多的是伪元素加了width: 120%却没配left: -10%。5.2 性能预算让低端机也能跑到 60 帧我给这个页面定的性能预算是首屏 JS CSS 总量 150KB首屏渲染 1.2s动画稳定 60fps。按这个预算反推能做的和不能做的就非常清楚了。粒子那块已经说过了限 DPR、限数量、帧率采样降级。除此之外还有三条合并绘制调用。canvas 上每个粒子单独fillStyle再fill是非常慢的。正确做法是先把所有粒子按颜色分组同色的用beginPath()一次性描出来。如果粒子颜色都一样性能能提升 3-5 倍。避免每帧读布局属性。动画循环里绝对不能出现offsetWidth、getBoundingClientRect()这类调用它们会强制同步布局。需要的尺寸在resize事件里缓存好。用will-change但要克制。给正在做 transform 动画的元素加will-change: transform可以提升到独立图层但加到十几个元素上会让内存暴涨手机上直接卡死。我的原则是只在动画进行中的元素上加播完就移除。实测数据我记录过一组同样的页面在四年前的安卓千元机上优化前平均帧率 34fps、有明显顿挫优化后稳定在 55-58fps。差距主要来自限制 DPR 和合并绘制这两步。5.3 部署与分享链路的细节页面做完最后一步是发出去。部署用静态托管就够了把整个文件夹拖上去几十秒出链接。不需要服务器、不需要域名也不需要备案如果只是个人分享。选托管服务时看两点是否支持 HTTPS、是否有国内可访问的节点。HTTPS 是硬要求不是的话微信里打开会被拦截提示。分享链路有几个细节能明显提升体验移动端加meta nametheme-color content#0d0b1a浏览器地址栏会变成背景色沉浸感强很多。加一个 180×180 的apple-touch-icon对方添加到主屏幕后就是一个 App 图标仪式感拉满。如果要在聊天窗口里显示漂亮的预览卡片需要配og:title、og:description、og:image三个标签。图片用 1200×630超过 300KB 可能不被抓取。注意分享链接时最好把?v2这种版本参数带上。静态托管普遍有 CDN 缓存你改了文案对方打开看到的还是旧版本这种情况我遇到过两次一度以为是代码没生效。还有一个体验优化生成一个二维码。如果是在餐厅、在卡片上手写二维码比发链接有仪式感得多扫码直达。生成工具很多把链接丢进去导出 PNG 就行注意选容错率高的等级印小了也能扫出来。6. 常见问题与排查实录6.1 问题速查表这张表是我这几年被问得最多的问题汇总基本覆盖了 90% 的翻车场景。现象最可能的原因处理方式打开是白屏JS 报错中断F12 看 Console多半是config未定义爱心不显示canvas 宽高为 0检查容器是否display: none或高度未设音乐点了没反应音频路径错 / 未走用户手势看 Network 是否 404确认在 click 回调里调用手机上文字超出屏幕用了固定px宽度改用max-width: 100%clamp()滚动卡顿监听了 scroll 事件换成IntersectionObserver动画只播一次就不动了unobserve后未重置这是预期行为需要的话手动移除类名天数显示少一天日期按 UTC 解析把-换成/微信里打开排版乱内置浏览器内核较旧避免用gap在 flex 老实现上、避免新语法分享预览无图og:image尺寸或体积不合规改成 1200×630压到 300KB 内改完代码没生效CDN 缓存链接加版本参数或强制刷新6.2 几条不在文档里的经验第一条永远先在最差的设备上测。我的习惯是写完立刻用一台旧手机开如果旧手机流畅好设备一定没问题反过来则不一定。很多人做完在电脑上看着完美发出去对方用手机打开发现粒子卡成幻灯片。第二条给所有动效留一个降级开关。我在config.js里加了一个reducedMotion字段配合系统的prefers-reduced-motion媒体查询media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }有人对强动效敏感或者开了省电模式这个媒体查询会自动生效。加上这段的成本是两行代码收益是避免一部分人打开就头晕。第三条文案比技术重要十倍。我做过技术最复杂的一版粒子、3D、音效全上了但文案是网上抄的通用情话收到的反馈是挺酷的。后来另一版只有一段白色背景上的黑字但写的是只有两个人懂的细节反馈是看哭了。技术是壳内容是核这话在这类页面上体现得淋漓尽致。第四条留一个改的余地。页面不是一次性的纪念日会变、想说的话会加。我现在的做法是把所有可变内容抽到config.js并且在文件顶部写清楚每个字段怎么改。这样对方或者你自己半年后想更新不用重新找人。第五条别在页面上放真实照片和敏感信息。静态页面的图片是可以被直接访问的链接一旦流出去照片也就流出去了。真有照片需求用图床并设置访问限制或者干脆做模糊处理。这一点很多人不在意但确实值得提醒一句。最后分享一个小技巧是我最近才用上的在最后一屏放一个再点一次的按钮点击后整个页面倒放一遍动画。实现上就是把classList.add(in)换成toggle配合transition的对称性视觉上就是重播。成本极低但很多人会因为这个小心思多停留几十秒甚至截图发朋友圈。做这类页面的乐趣大概就在这些没什么用但很动人的小地方。
每到五月中旬各种群里就开始冒出同一类需求帮忙弄一个520 表白网站纯HTML 前端打开就能看最好手机电脑都能跑再顺手把生日快乐代码那套效果也塞进去。这类需求看着简单实际上踩坑点密集——去年我前后帮人做过七八个版本从单文件小页面到自己写粒子引擎坑踩得足够多这里把整套思路和代码完整摊开讲一遍。这篇内容面向三类人完全没写过前端、想照着抄一份能直接用的页面的人写过后台但没怎么碰过动效的人以及已经会写 HTML、想把页面从能看做到好看的人。我不会只贴一大坨代码让你自己悟而是把每一段为什么这么写、参数怎么定、哪些地方最容易翻车都说清楚。全文用的都是原生 HTML/CSS/JavaScript没有任何构建工具复制到本地双击就能预览扔到任意静态托管上就能发出链接。1. 先把需求拆开一个表白页到底由哪些零件组成1.1 标题里的三个关键词对应三种完全不同的页面520 表白网站HTML 前端生日快乐代码这三个词放在一起其实混了三种不同的东西动手之前必须先分清否则做出来的东西四不像。表白页的核心是情绪递进它需要一个钩子首屏视觉冲击、一段叙事想说的话、一个落点一个按钮、一句话、一个日期。它更像一张会动的卡片而不是一个网站。HTML 前端限定的是技术边界不接后端、不存数据、不登录。所有内容硬编码在文件里或者写进一个 JSON 里。这个限制听起来是缺点实际上是优点——它意味着零成本部署、零维护、永远不会挂。生日快乐代码这类关键词搜出来的东西通常是打字机 蛋糕 蜡烛 彩带那一套。它的技术点和表白页高度重合只是叙事结构不同生日页是时间点触发需要在特定日期打开才有仪式感。所以我的做法是一套骨架两套皮肤。底层是同一套动效引擎粒子、打字机、滚动触发上层的文案、配色、首屏元素按场景切换。这样你做完一个另一个只需要改配置。提示别一上来就找模板下载。网上流传的很多模板带压缩混淆的 JS改一个颜色都要翻几千行最后维护成本远超自己写。1.2 技术选型为什么我坚持不用框架有人会问现在前端生态这么成熟为什么不用 Vue 或者 React 写答案很直接这个场景里框架是纯负担。一个表白页总共就三四屏内容、五六段动效状态管理需求几乎为零。引入框架意味着你要配构建工具、要打包、要处理路由哪怕只有一个路由最终产物是几百 KB 的 JS bundle而页面本身可能只有 30 KB。首屏加载时间从几乎瞬间变成要等一下而这恰恰是最致命的——打开链接的前两秒决定了对方会不会继续往下看。我的选型原则是这样的需求选择理由单页、无数据交互原生 HTML/CSS/JS零依赖单文件可分发需要多个页面切换原生 CSS 过渡用class切换即可不需要路由需要读取配置文案、日期独立config.js改文案不用碰逻辑代码需要粒子/绘图动效Canvas 2D比 DOM 动画性能高一个量级需要复杂 3D不建议手机上掉帧严重收益低最后一个我要强调一下别上 3D。我见过用 WebGL 做旋转爱心立方的版本桌面端确实炫但在一台中端安卓机上打开前五秒是黑屏。仪式感瞬间变成尴尬。1.3 兼容性基线先划死一条线再动手动手前我会先划一条兼容线这条线决定了后面能用哪些 API。我的基线是iOS 14 / Android 8 / 桌面端近三年主流浏览器。这条线往下IntersectionObserver、CSS 变量、clamp()、flex/gap全部可用dvh单位在 iOS 15.4 可用但需要降级方案。具体到这份页面上需要特别处理的只有三处100vh在移动端浏览器地址栏收起时会跳变用100dvh加100vh兜底。Audio.play()必须由用户手势触发任何进页面自动播放的方案都会被拦截。backdrop-filter在部分安卓 WebView 上不生效毛玻璃效果需要给一个纯色兜底。把这三条先想明白后面写代码就不会出现本地好好的发给对方全乱的情况。这是我踩过最多次的坑没有之一。2. 骨架与视觉把好看翻译成可执行的参数2.1 单屏分段结构比整页长滚动更稳结构上我一般用分段式单屏而不是一镜到底的长滚动。原因很实际长滚动页面在手机上很难控制节奏用户一划就滑到底动效还没播完而分段式可以精确控制每一屏进入的时机。具体做法是用几个section堆叠每个section高度设为100dvh兜底100vh配合scroll-snap-type: y mandatory让滚动自动吸附到整屏。这样对方每划一次正好停在一屏上动效刚好播完。.page { height: 100vh; height: 100dvh; overflow-y: auto; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; } .screen { height: 100vh; height: 100dvh; scroll-snap-align: start; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }这里有个细节值得说scroll-snap一定要挂在滚动容器上而不是body。我早期版本直接写在html, body上在 iOS Safari 里会出现吸附卡顿、回弹异常。把整个页面塞进一个.page容器后问题消失。另一个细节是scroll-snap-align: start配合scroll-padding-top。如果页面顶部有固定的导航或装饰条不加scroll-padding会导致每次吸附都偏移一截。2.2 配色三色原则与对比度下限超好看这三个字最容易被误解。好看不等于颜色多恰恰相反颜色越少越高级。我给自己定的规矩是主色、辅色、点缀色一共三个超过三个必翻车。以表白场景为例我常用的两组配色场景主色背景辅色文字点缀色高亮深色浪漫#0d0b1a#f2e9f5#ff4d7d浅色清新#fdf6f7#2b2230#e0506f深色底的好处是粒子发光效果明显粉色的爱心在近乎黑的背景上有很强的视觉冲击浅色底的好处是文字可读性天然更好适合长辈或者不喜欢暗色的接收方。对比度这块必须较真。正文文字和背景的对比度我一般控制在7:1 以上WCAG AAA 级辅助信息不低于 4.5:1。这不是为了教条而是因为手机上亮度自动调节后低对比度的浅灰文字在户外基本看不清。用浏览器开发者工具里的对比度检查器一测就知道。还有一个容易被忽略的点别用纯黑#000和纯白#fff。纯黑背景上的动效容易出现色带断层纯白背景上的粉色会显得刺眼。用#0d0b1a这种带一点紫的深色观感会柔和很多。2.3 字体与排版中文页面的隐形坑中文排版在情侣页面上其实比英文更难做好看原因是中文字体文件普遍巨大一个完整的中文字体动辄 5-10 MB直接引入会让页面加载卡死。我的处理方案分三层第一层正文用系统字体栈。-apple-system, PingFang SC, Microsoft YaHei, sans-serif这一串足够覆盖绝大多数设备加载成本为零。第二层标题用装饰性方案代替字体文件。比如用 CSS 实现描边字、渐变字、逐字上浮动画效果比换字体更抓眼球成本也低。.title { font-size: clamp(28px, 8vw, 64px); font-weight: 800; letter-spacing: 0.08em; background: linear-gradient(120deg, #ffd6e7, #ff4d7d 60%, #ffb3c9); -webkit-background-clip: text; background-clip: text; color: transparent; }第三层如果确实想要手写体自己做子集化。把文案里用到的字单独导出一个几十 KB 的字体文件而不是引入完整字体包。这一步能省下 95% 的体积。letter-spacing这个参数我特别想强调。中文默认字距偏挤标题加0.05em ~ 0.1em的letter-spacing立刻显得透气正文加0.02em就够加多了会显得散。行高用1.8左右中文比英文更需要行间距。3. 核心动效拆解心形、打字机、滚动触发3.1 心形曲线的数学来源与坐标映射满屏粒子汇聚成一颗爱心是这个场景里最经典也最有效的动效。它的核心是一条心形参数方程x 16 · sin³(t) y 13 · cos(t) - 5 · cos(2t) - 2 · cos(3t) - cos(4t)t从0走到2π就能画出完整的心形轮廓。这条方程的好处是上下对称、曲线圆润比用两段贝塞尔曲线拼出来的心形更自然。落到 Canvas 上要处理两件事。第一Canvas 的 y 轴是向下的而这套方程的 y 轴向上所以要取负号。第二方程算出来的坐标范围大约是 x ∈ [-16, 16]、y ∈ [-17, 12]得映射到画布尺寸上。function heartPoint(t) { const x 16 * Math.pow(Math.sin(t), 3); const y 13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t); return { x, y }; } function toCanvas(p, w, h, scale) { return { x: w / 2 p.x * scale, y: h / 2 - p.y * scale // 注意这里是减号 }; }scale这个系数怎么定我的经验值是Math.min(w, h) / 40。分母取 40 是因为心形的最大半径约等于 17乘以 2 是 34留一点边距刚好 40。如果想让爱心更饱满可以调到 36 或 34但别低于 32否则会顶到画布边缘被裁掉。坐标系这件事我多说一句你可以写一个小测试只画几个点肉眼确认一下心形是不是正着反了。我第一次做的时候直接用了结果画出来是一颗倒心还以为是方程抄错了白白排查了半个小时。3.2 粒子系统数量、缓动与性能上限有了轮廓接下来要把点变成粒子。我的做法是在心形轮廓上均匀取 N 个点每个点对应一个粒子粒子初始位置随机散布在画布上然后用缓动函数逐渐逼近目标点。粒子的缓动我用的是最简单的线性插值// p.x 当前坐标p.tx 目标坐标ease 是缓动系数 p.x (p.tx - p.x) * ease; p.y (p.ty - p.y) * ease;ease取0.04 ~ 0.08比较合适。取值太小粒子飞过来慢悠悠的观感拖沓取值太大粒子瞬间到位没有汇聚的过程。我实测0.06是个比较舒服的中间点。粒子数量是个需要权衡的参数。我给出的区间是设备类型建议粒子数说明桌面端900 ~ 1400视觉密度高观感饱满中高端手机600 ~ 900兼顾密度和帧率低端手机/老设备300 ~ 500保帧率优先判断设备能力可以用navigator.hardwareConcurrencyCPU 核心数和屏幕宽度粗略估算但更稳的办法是跑一段实时帧率采样前 60 帧统计平均帧时长如果超过 20ms即低于 50fps就自动把粒子数砍半。let frameCount 0, frameSum 0, degraded false; function loop(now) { if (frameCount 60) { frameSum now - lastTime; frameCount; if (frameCount 60 frameSum / 60 20) { particles.length Math.floor(particles.length / 2); degraded true; } } lastTime now; // ...绘制逻辑 requestAnimationFrame(loop); }还有一个性能关键点限制 devicePixelRatio。高分屏上window.devicePixelRatio可能是 3如果不做限制画布的实际像素量是逻辑像素的 9 倍填充率压力直接爆炸。我一般Math.min(dpr, 2)视觉上肉眼几乎看不出差别性能能省一半以上。3.3 打字机效果的正确写法打字机几乎是这类页面的标配但十份实现里有八份有 bug。最常见的问题是中英文混排时截断半个字符或者遇到表情符号直接变成乱码。根本原因是String的索引按 UTF-16 码元走而表情符号占两个码元代理对直接text[i]会把它劈成两半。正确的做法是先用Array.from(text)拆成字符数组再逐个追加。function typewriter(el, text, speed 90) { return new Promise(resolve { const chars Array.from(text); // 关键按字符拆不按码元 let i 0; el.textContent ; const timer setInterval(() { el.textContent chars[i]; i; if (i chars.length) { clearInterval(timer); resolve(); } }, speed); }); }speed取多少中文建议80 ~ 120ms一字太快了没仪式感太慢了让人着急。如果文案有 30 个字100ms就是 3 秒正好是一个屏住呼吸读完的节奏。如果要更有质感可以做一个变速打字标点符号后多停 200ms营造停顿感。实现上就是判断当前字符是不是。如果是就await sleep(200)再继续。这个小细节我加上之后好几个朋友专门问过为什么你的打字感觉更自然。还有一个必踩的坑光标闪烁。很多人用border-right做光标结果文字换行时光标跑到下一行左边。用::after伪元素配animation: blink 1s steps(1) infinite更稳而且可以随时用display: none关掉。3.4 滚动触发淡入与 IntersectionObserver每一屏进入视口时元素淡入上浮这个效果我用IntersectionObserver实现而不是监听scroll事件。区别在哪scroll事件触发频率极高每次都要读getBoundingClientRect()读布局属性会导致浏览器强制同步重排滚动一卡一卡的。IntersectionObserver是浏览器在合成线程里做好的判断只在元素进出视口时回调一次性能完全不在一个层级。const io new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { entry.target.classList.add(in); io.unobserve(entry.target); // 播完就取消监听 } }); }, { threshold: 0.35, rootMargin: 0px 0px -10% 0px }); document.querySelectorAll(.reveal).forEach(el io.observe(el));threshold: 0.35的意思是元素露出 35% 才触发。这个值我调过好几轮设成 0.1 太早元素刚露个头就开始动观感急躁设成 0.8 太晚用户已经看到静态内容了才动反而显得迟钝。0.3 ~ 0.4是甜区。rootMargin底部给-10%是为了让触发点稍微上移避免元素贴在屏幕最下沿时才开始动那样用户会错过动画的前半段。动画本身用 CSS 实现JS 只负责加类名.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); } .reveal.in { opacity: 1; transform: translateY(0); }cubic-bezier(0.22, 1, 0.36, 1)这个曲线值得记下来它前段快后段缓出来的效果是轻轻落定比默认的ease高级不少。整个页面所有过渡我都统一用这条曲线观感会非常一致。4. 完整实操从空文件夹到能发出去的链接4.1 目录结构与文件组织先说结构。我强烈建议把配置和逻辑分开哪怕只有一个页面heart-page/ ├── index.html ├── css/ │ └── style.css ├── js/ │ ├── config.js ← 文案、日期、配色都在这 │ ├── heart.js ← 粒子爱心 │ └── main.js ← 页面逻辑 └── assets/ ├── bgm.mp3 └── photo.jpgconfig.js单独拎出来是这个结构的关键。它的内容是纯数据window.CONFIG { name: 小A, date: 2025-05-20, lines: [ 这是第一句话, 这是第二句话, 这是最后一句 ], theme: dark, bgm: assets/bgm.mp3, particles: auto };这样对方生日换了、想说的话换了只需要改这一个文件不用去几百行 JS 里翻。我吃过这个亏——第一次做完朋友想改个名字我在压缩过的代码里找了二十分钟。particles: auto这个设计是为了后面做设备自适应如果值是数字就强制用这个粒子数是auto就按 3.2 节的策略动态决定。4.2 HTML 结构语义化分层HTML 我只写骨架所有内容从config里填。这样结构和数据彻底解耦。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1, viewport-fitcover title给你的/title link relstylesheet hrefcss/style.css /head body main classpage !-- 第一屏首屏 -- section classscreen screen-hero canvas idheart/canvas h1 classtitle>:root { --c-bg: #0d0b1a; --c-text: #f2e9f5; --c-accent: #ff4d7d; --c-accent-soft: #ffd6e7; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur: 0.7s; --gap: clamp(16px, 4vw, 32px); } * { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--c-bg); color: var(--c-text); font-family: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; overflow: hidden; -webkit-tap-highlight-color: transparent; }overflow: hidden加在body上滚动交给内部的.page这样能彻底避免移动端双滚动条的问题。-webkit-tap-highlight-color: transparent是去掉 iOS 上点击元素时的灰色闪光这个灰色块在深色背景上非常突兀。首屏有个背景光晕我用伪元素加径向渐变做比图片省得多.screen-hero::before { content: ; position: absolute; inset: -20%; background: radial-gradient( circle at 50% 45%, rgba(255, 77, 125, 0.22), transparent 62% ); pointer-events: none; }inset: -20%是为了让光晕溢出边界避免出现生硬的圆形边缘。pointer-events: none让它不挡点击这个不写会挡住下面的按钮。按钮上我给了一个轻微的呼吸动画.btn { padding: 14px 36px; border: 1px solid var(--c-accent); border-radius: 999px; background: transparent; color: var(--c-accent-soft); font-size: 16px; letter-spacing: 0.12em; animation: breathe 2.6s ease-in-out infinite; transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out); } .btn:active { background: var(--c-accent); color: #fff; } keyframes breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 125, 0.4); } 50% { box-shadow: 0 0 0 12px rgba(255, 77, 125, 0); } }这个box-shadow扩散的呼吸效果比scale缩放更含蓄不会让布局视觉重心跳动。2.6s的周期是我反复调的1.5s太快像心跳过速4s又几乎看不出在动。4.4 JavaScript把所有动效串起来main.js的职责是编排它不实现具体动画只负责按顺序调用。这样逻辑清晰出问题也容易定位。(function () { const cfg window.CONFIG; // 1. 填充文案 document.querySelectorAll([data-line]).forEach(el { const idx Number(el.dataset.line); el.textContent cfg.lines[idx] || ; }); // 2. 首屏打字 const titleEl document.querySelector([data-typing]); typewriter(titleEl, cfg.lines[0] || 给你的, 110); // 3. 滚动触发 const io new IntersectionObserver(entries { entries.forEach(e { if (e.isIntersecting) { e.target.classList.add(in); io.unobserve(e.target); } }); }, { threshold: 0.35, rootMargin: 0px 0px -10% 0px }); document.querySelectorAll(.reveal).forEach(el io.observe(el)); // 4. 天数计算 const daysEl document.getElementById(daysNum); if (daysEl) { const start new Date(cfg.date.replace(/-/g, /)).getTime(); const now Date.now(); const days Math.max(0, Math.floor((now - start) / 86400000)); countUp(daysEl, days); } })();这里有个容易被忽略的细节new Date(2025-05-20)在部分浏览器里会被当成 UTC 时间解析导致日期偏差一天。把横杠换成斜杠2025/05/20就能强制按本地时间解析。这个坑我在跨年那次的页面上踩过显示的天数比实际少一天排查了半天。countUp是数字滚动效果从 0 递增到目标值function countUp(el, target, dur 1200) { const start performance.now(); function tick(now) { const p Math.min((now - start) / dur, 1); const eased 1 - Math.pow(1 - p, 3); // easeOutCubic el.textContent Math.floor(target * eased); if (p 1) requestAnimationFrame(tick); else el.textContent target; } requestAnimationFrame(tick); }easeOutCubic的效果是数字冲上去然后减速停住比线性递增有质感得多。最后一行el.textContent target是保险防止浮点误差让最终值少 1。4.5 背景音乐与用户交互策略背景音乐是这类页面的重点争议项。有人觉得必须有有人觉得吵。我的建议是默认静音提供一个按钮点了才播。这不是设计偏好是硬性限制。所有现代浏览器都禁止在没有用户手势的情况下调用audio.play()强行调用会抛NotAllowedError控制台一片红。正确的做法是这样const bgm new Audio(cfg.bgm); bgm.loop true; bgm.volume 0; document.getElementById(muteBtn).addEventListener(click, async (e) { const btn e.currentTarget; try { if (bgm.paused) { await bgm.play(); fadeVolume(bgm, 0, 0.6, 900); btn.classList.add(playing); } else { fadeVolume(bgm, bgm.volume, 0, 500, () bgm.pause()); btn.classList.remove(playing); } } catch (err) { console.warn(播放失败, err); } }); function fadeVolume(audio, from, to, dur, done) { const start performance.now(); function step(now) { const p Math.min((now - start) / dur, 1); audio.volume from (to - from) * p; if (p 1) requestAnimationFrame(step); else done done(); } requestAnimationFrame(step); }淡入淡出这一步很关键。直接play()会让音乐从最大音量突然炸出来尤其对方可能在安静环境里打开第一下就是惊吓。用 0.6~0.9 秒淡入体验完全不同。音量上限我建议压到0.6以下手机上外放时 1.0 的音量经常有破音。还有一个实用技巧把音频文件压到 1MB 以内。一首三分钟的完整歌曲即使是 128kbps 也有 3MB在弱网下加载会把首屏拖垮。我一般截取 30 秒高潮段落循环压到 400KB 左右效果反而更好。5. 移动端适配、性能与发布5.1 移动端最容易翻车的四个地方第一100vh跳动。手机上地址栏隐藏和显示时100vh会变化导致整屏内容跳一下。用100dvh加100vh兜底是标准解法但要注意顺序——先写100vh再写100dvh不支持的浏览器会忽略后者。第二安全区域。全面屏底部有 34px 左右的手势条区域内容压上去会被遮挡。给底部元素加padding-bottom: calc(24px env(safe-area-inset-bottom, 0px));env()的第二个参数是兜底值老浏览器不支持safe-area-inset-bottom时会取 0。第三字号过小。桌面端14px的字在手机上看会非常费劲尤其对方如果是长辈。正文我一般用clamp(15px, 4.2vw, 18px)保证小屏上也不低于 15px。第四横向溢出。加了一堆绝对定位的装饰元素后很容易出现横向滚动条。在body上加overflow-x: hidden能治标但更该做的是用开发者工具的溢出检测找出到底是哪个元素超宽了。我遇到最多的是伪元素加了width: 120%却没配left: -10%。5.2 性能预算让低端机也能跑到 60 帧我给这个页面定的性能预算是首屏 JS CSS 总量 150KB首屏渲染 1.2s动画稳定 60fps。按这个预算反推能做的和不能做的就非常清楚了。粒子那块已经说过了限 DPR、限数量、帧率采样降级。除此之外还有三条合并绘制调用。canvas 上每个粒子单独fillStyle再fill是非常慢的。正确做法是先把所有粒子按颜色分组同色的用beginPath()一次性描出来。如果粒子颜色都一样性能能提升 3-5 倍。避免每帧读布局属性。动画循环里绝对不能出现offsetWidth、getBoundingClientRect()这类调用它们会强制同步布局。需要的尺寸在resize事件里缓存好。用will-change但要克制。给正在做 transform 动画的元素加will-change: transform可以提升到独立图层但加到十几个元素上会让内存暴涨手机上直接卡死。我的原则是只在动画进行中的元素上加播完就移除。实测数据我记录过一组同样的页面在四年前的安卓千元机上优化前平均帧率 34fps、有明显顿挫优化后稳定在 55-58fps。差距主要来自限制 DPR 和合并绘制这两步。5.3 部署与分享链路的细节页面做完最后一步是发出去。部署用静态托管就够了把整个文件夹拖上去几十秒出链接。不需要服务器、不需要域名也不需要备案如果只是个人分享。选托管服务时看两点是否支持 HTTPS、是否有国内可访问的节点。HTTPS 是硬要求不是的话微信里打开会被拦截提示。分享链路有几个细节能明显提升体验移动端加meta nametheme-color content#0d0b1a浏览器地址栏会变成背景色沉浸感强很多。加一个 180×180 的apple-touch-icon对方添加到主屏幕后就是一个 App 图标仪式感拉满。如果要在聊天窗口里显示漂亮的预览卡片需要配og:title、og:description、og:image三个标签。图片用 1200×630超过 300KB 可能不被抓取。注意分享链接时最好把?v2这种版本参数带上。静态托管普遍有 CDN 缓存你改了文案对方打开看到的还是旧版本这种情况我遇到过两次一度以为是代码没生效。还有一个体验优化生成一个二维码。如果是在餐厅、在卡片上手写二维码比发链接有仪式感得多扫码直达。生成工具很多把链接丢进去导出 PNG 就行注意选容错率高的等级印小了也能扫出来。6. 常见问题与排查实录6.1 问题速查表这张表是我这几年被问得最多的问题汇总基本覆盖了 90% 的翻车场景。现象最可能的原因处理方式打开是白屏JS 报错中断F12 看 Console多半是config未定义爱心不显示canvas 宽高为 0检查容器是否display: none或高度未设音乐点了没反应音频路径错 / 未走用户手势看 Network 是否 404确认在 click 回调里调用手机上文字超出屏幕用了固定px宽度改用max-width: 100%clamp()滚动卡顿监听了 scroll 事件换成IntersectionObserver动画只播一次就不动了unobserve后未重置这是预期行为需要的话手动移除类名天数显示少一天日期按 UTC 解析把-换成/微信里打开排版乱内置浏览器内核较旧避免用gap在 flex 老实现上、避免新语法分享预览无图og:image尺寸或体积不合规改成 1200×630压到 300KB 内改完代码没生效CDN 缓存链接加版本参数或强制刷新6.2 几条不在文档里的经验第一条永远先在最差的设备上测。我的习惯是写完立刻用一台旧手机开如果旧手机流畅好设备一定没问题反过来则不一定。很多人做完在电脑上看着完美发出去对方用手机打开发现粒子卡成幻灯片。第二条给所有动效留一个降级开关。我在config.js里加了一个reducedMotion字段配合系统的prefers-reduced-motion媒体查询media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }有人对强动效敏感或者开了省电模式这个媒体查询会自动生效。加上这段的成本是两行代码收益是避免一部分人打开就头晕。第三条文案比技术重要十倍。我做过技术最复杂的一版粒子、3D、音效全上了但文案是网上抄的通用情话收到的反馈是挺酷的。后来另一版只有一段白色背景上的黑字但写的是只有两个人懂的细节反馈是看哭了。技术是壳内容是核这话在这类页面上体现得淋漓尽致。第四条留一个改的余地。页面不是一次性的纪念日会变、想说的话会加。我现在的做法是把所有可变内容抽到config.js并且在文件顶部写清楚每个字段怎么改。这样对方或者你自己半年后想更新不用重新找人。第五条别在页面上放真实照片和敏感信息。静态页面的图片是可以被直接访问的链接一旦流出去照片也就流出去了。真有照片需求用图床并设置访问限制或者干脆做模糊处理。这一点很多人不在意但确实值得提醒一句。最后分享一个小技巧是我最近才用上的在最后一屏放一个再点一次的按钮点击后整个页面倒放一遍动画。实现上就是把classList.add(in)换成toggle配合transition的对称性视觉上就是重播。成本极低但很多人会因为这个小心思多停留几十秒甚至截图发朋友圈。做这类页面的乐趣大概就在这些没什么用但很动人的小地方。
