做前端这些年，被问得最密集的一类需求不是后台管理系统，而是“有没有现成的代码表白特效，能直接发的那种”。这个问题的本质其实很朴素：一段文字消息太容易被划走，而一个自己会动、会响应点击、会跟着音乐跳动的页面，能让人多停留十几秒。代码在这里不是炫技工具，它承担的是一层“我为这件事花了心思”的载体。这篇就把我这些年攒下来的十款表白小特效一次性摊开，从最基础的单文件 HTML 爱心粒子，到能用鼠标点爆的心形，再到跑在终端里的彩色爱心和 Python 生成的动图。全文不假设你有工程经验，只要能新建一个文本文档、把后缀改掉就能上手，同时也会写给已经会写代码的人看的性能调优和兼容性坑位。
1. 动手之前：代码表白到底在解决什么问题
1.1 从“发一段文字”到“打开一个页面”的差别
很多人第一次做这东西，脑子里想的是“我要写个多牛的效果”，结果卡在第一步：写完了怎么给对方看。我见过最典型的失败案例，是有人花三天写了一个包含十几个文件、依赖本地服务器才能跑的工程，最后卡在“对方点开是白屏”。这就是方案选型没做在前面。
代码表白的技术本质只有三件事：渲染、时间、交互。渲染决定画面好不好看，时间决定节奏是否动人，交互决定对方愿不愿意多玩两下。文字消息在这三件事上全是零，而一个单文件 HTML 能做到满分。所以我给自己的项目定了一条硬规矩：所有礼物类项目，必须是单文件、双击即开、不依赖网络请求、不依赖本地服务器。这条规矩看起来简单，但它直接决定了你后面所有技术选择——不能用外部 JS 库的 CDN，不能引用本地图片路径，不能用 fetch 读数据。
为什么这么坚持？因为分享链路的容错率极低。对方可能用的是微信内置浏览器、可能是老款安卓机、可能是把文件下载到本地再用别的应用打开。任何一个环节出问题，你精心做的东西就打不开。单文件方案把这些变量全部收敛成一个：只要浏览器能打开 HTML，它就能跑。
1.2 十款特效的清单与选型对照表
先把这次的十款列清楚，你可以直接按目标挑，不用全做。我按“实现难度、适配场景、观感冲击力”三个维度做了对照，方便你对号入座。
| 序号 | 名称 | 核心技术 | 难度 | 适合场景 |
|---|---|---|---|---|
| 1 | 爱心粒子特效 | Canvas 2D 粒子系统 | 中 | 通用开场，最有辨识度 |
| 2 | 逐字打字机表白信 | JS 定时器 + DOM | 低 | 文案为主，情绪铺垫 |
| 3 | 3D 旋转照片墙 | CSS 3D transform | 中 | 有合照、有共同回忆 |
| 4 | 点击爆心 | Canvas 事件 + 粒子爆发 | 中 | 增加互动，手机端表现好 |
| 5 | 花瓣星点飘落背景 | Canvas 或 CSS 动画 | 低 | 给上面任何一款做底衬 |
| 6 | 音乐律动爱心 | Web Audio API 频域分析 | 高 | 有专属歌曲，仪式感强 |
| 7 | 答题解锁式表白页 | 状态机 + DOM 显隐 | 中 | 长线铺垫，适合异地 |
| 8 | 终端彩色爱心 | Python + ANSI 转义 | 低 | 极客人设，程序员专属 |
| 9 | 字符画与几何玫瑰 | 数学公式 + 字符栅格 | 中 | 生成图片发朋友圈 |
| 10 | 一键导出 GIF / 长图 | Canvas 逐帧 + 图像编码 | 高 | 需要发到不能开网页的平台 |
这张表里藏着一个选型逻辑：先确定传播渠道，再确定技术方案。如果对方只能在聊天窗口里看图片，那第 10 款才是你的主线；如果能发链接，第 1、3、6 款随便挑；如果对方本身就是写代码的，第 8 款的反差感最强。
我个人的推荐组合是 1 + 2 + 5：爱心粒子开场，两秒后文字淡入打字机，背景飘花瓣。这三款代码量加起来不到三百行，一个文件装得下，观感却已经超过市面上大部分现成模板。
提示：不要十款全塞进一个页面。我试过把粒子、照片墙、音乐律动全堆在一起，结果低端安卓机直接掉到十几帧，画面卡成幻灯片。礼物类项目的第一原则是稳，不是炫。
2. 三款零基础可直接跑的 HTML 特效
2.1 爱心粒子特效：把心形参数方程拆成粒子目标点
这是整个清单里最出效果、也最值得讲原理的一款。很多人以为爱心是“画”出来的，其实不是，它是用公式算出几百个点，再让粒子飞过去。
经典心形参数方程长这样：
x = 16 * sin(t)^3 y = 13 * cos(t) - 5 * cos(2t) - 2 * cos(3t) - cos(4t)t 从 0 取到 2π，逐个代入就得到一圈心形轮廓点。这个公式的好处是天然闭合、左右对称、顶部有两个圆润的凸起，视觉上比手画的贝塞尔曲线更“标准”。注意 y 轴方向：数学坐标系 y 向上，而 Canvas 的 y 向下，所以要用的时候得取负值。
粒子系统的思路分四步：生成目标点 → 初始化起点 → 每帧按比例靠近 → 加一点随机抖动。第三步是灵魂，用的缓动公式是current += (target - current) * 0.06，这个系数就是“追随速度”，太小粒子慢吞吞，太大粒子一步到位没有飘逸感。我实测 0.05 到 0.09 之间最舒服。
完整可跑代码如下，直接存成love.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> html,body{margin:0;height:100%;background:#0b0b12;overflow:hidden} canvas{display:block} </style> </head> <body> <canvas id="c"></canvas> <script> const canvas = document.getElementById('c'); const ctx = canvas.getContext('2d'); let W = 0, H = 0; const COUNT = 800; const particles = []; // 高清屏适配：按设备像素比放大画布，再用 transform 缩回逻辑尺寸 function resize() { const dpr = window.devicePixelRatio || 1; W = window.innerWidth; H = window.innerHeight; canvas.width = W * dpr; canvas.height = H * dpr; canvas.style.width = W + 'px'; canvas.style.height = H + 'px'; ctx.setTransform(dpr, 0, 0, dpr, 0, 0); } // 心形参数方程，返回相对中心的坐标 function heartPoint(t, scale) { 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: x * scale, y: -y * scale }; } function buildParticles() { particles.length = 0; const scale = Math.min(W, H) / 42; // 让爱心始终占屏幕合适比例 const cx = W / 2, cy = H / 2; for (let i = 0; i < COUNT; i++) { const t = Math.random() * Math.PI * 2; // 加随机半径偏移，让爱心有填充厚度而不是空心轮廓 const r = 0.82 + Math.random() * 0.18; const p = heartPoint(t, scale * r); particles.push({ x: Math.random() * W, y: Math.random() * H, tx: cx + p.x, ty: cy + p.y, size: 0.8 + Math.random() * 1.6, hue: 330 + Math.random() * 30 }); } } function loop() { ctx.fillStyle = 'rgba(11,11,18,0.28)'; // 半透明覆盖，形成拖尾 ctx.fillRect(0, 0, W, H); for (const p of particles) { p.x += (p.tx - p.x) * 0.07; p.y += (p.ty - p.y) * 0.07; const flicker = 0.5 + Math.random() * 0.5; ctx.beginPath(); ctx.fillStyle = `hsla(${p.hue},90%,${60 + flicker * 20}%,${flicker})`; ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(loop); } resize(); buildParticles(); loop(); window.addEventListener('resize', () => { resize(); buildParticles(); }); </script> </body> </html>这段代码里有三个细节值得单独说。第一是ctx.fillStyle = 'rgba(11,11,18,0.28)'这行半透明覆盖，它替代了常见的clearRect。用清屏的话粒子是硬边圆点，用半透明覆盖则每帧残留一点旧位置，粒子就有了短尾，观感软很多。第二是缩放系数Math.min(W, H) / 42，这样在竖屏手机和横屏电脑上爱心都不会溢出。第三是hue用了 330 到 360 的色相区间，落在玫红到洋红之间，比纯红更有质感。
注意：粒子数量不要超过 1200。超过之后手机端帧率肉眼可见地掉，而且密度太大反而看不清心形轮廓。如果一定要更密，就把粒子画小一点，而不是加数量。
2.2 逐字打字机表白信：时间控制与光标闪烁
第二款是最“便宜”的效果，几十行代码，但情绪杀伤力往往最大。原理就是定时器不断截取字符串前 i 个字符写进 DOM。
<!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> html,body{ margin:0;height:100%;background:#0b0b12;color:#f2f2f2; display:flex;align-items:center;justify-content:center; font-family:"PingFang SC","Microsoft YaHei",sans-serif; } #wrap{max-width:34em;padding:0 24px;font-size:18px;line-height:2} #msg{white-space:pre-wrap} .cursor{display:inline-block;width:2px;height:1em; background:#ff5a8a;vertical-align:-2px;animation:blink 1s steps(1) infinite} @keyframes blink{50%{opacity:0}} </style> </head> <body> <div id="wrap"> <span id="msg"></span><span class="cursor"></span> </div> <script> const text = `认识你之后的每一天， 都比我预想的要好一点。 所以想认真问你一句： 以后的路，能不能一起走？`; const el = document.getElementById('msg'); let i = 0; function type() { if (i > text.length) return; el.textContent = text.slice(0, i); i++; // 标点符号处停顿更久，模拟真人写信的呼吸感 const ch = text[i - 1]; let delay = 110; if ('，。？、\n'.includes(ch)) delay = 420; setTimeout(type, delay); } setTimeout(type, 800); </script> </body> </html>重点在那个delay的判断。如果每个字都是固定 110 毫秒，读起来像机器播报；在逗号、句号、换行处拉到 400 毫秒以上，节奏立刻变得像有人在斟酌措辞。这是纯手感层面的调优，任何文档里都不会写。
另外提一句字体。在 Windows 上推荐用"PingFang SC","Microsoft YaHei"这样的字族回退链；如果你在 WSL 或 Ubuntu 里做开发调试，选用一套等宽字体（比如 JetBrains Mono、Cascadia Code 这类）会让代码对齐舒服很多，接近 macOS 的观感。不过表白页本身用的是中文字体，等宽字体只影响你的编辑体验。
2.3 3D 旋转照片墙：perspective 与 translateZ 的半径计算
第三款适合有合照的场景。核心是 CSS 的 3D 变换：给容器加perspective，把每张照片沿 Y 轴旋转不同角度，再推出去一个半径。
半径不能随便填，得算。假设你有 N 张照片，每张宽度 w，要围成一个正多边形且相邻两张不重叠，半径 R 满足：
R = (w / 2) / tan(π / N)以 8 张、每张 200px 宽为例，π/8 约 22.5 度，tan 值约 0.414，R ≈ 100 / 0.414 ≈ 241px。取 260px 留一点间隙比较舒服。
<!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> html,body{margin:0;height:100%;background:#0b0b12; display:flex;align-items:center;justify-content:center;overflow:hidden} .stage{perspective:1200px} .ring{ position:relative;width:200px;height:260px; transform-style:preserve-3d; animation:spin 18s linear infinite; } .ring img{ position:absolute;inset:0;width:200px;height:260px; object-fit:cover;border-radius:8px; box-shadow:0 0 18px rgba(255,90,138,.35); } @keyframes spin{from{transform:rotateY(0)}to{transform:rotateY(360deg)}} </style> </head> <body> <div class="stage"> <div class="ring" id="ring"></div> </div> <script> const N = 8, R = 260; const ring = document.getElementById('ring'); // 实际项目里把这里换成你的图片，用 base64 内联以保持单文件 const colors = ['#ff5a8a','#ff9ab5','#ffd1dc','#f7a8c4', '#ffb3c6','#ff8fab','#ffe0e9','#ff7a9c']; for (let i = 0; i < N; i++) { const d = document.createElement('div'); d.style.cssText = `position:absolute;inset:0; transform:rotateY(${i * 360 / N}deg) translateZ(${R}px); background:${colors[i]};border-radius:8px; box-shadow:0 0 18px rgba(255,90,138,.35)`; ring.appendChild(d); } </script> </body> </html>这里的transform顺序很关键：先 rotateY 再 translateZ。因为变换是从右往左作用于元素的，translateZ 是在旋转后的局部坐标系里往外推，所以每张卡片才会沿着自己的朝向散开成圆柱面。如果写成translateZ(R) rotateY(...)，八张卡片会叠在同一个位置旋转，效果完全不对。
还有一个生产环境的坑：<img src="本地路径">在单文件方案里不能用。正确做法是把图片转成 base64 内联进src，或者干脆用纯色卡片加文字。图片多的话 base64 会让文件膨胀得厉害，一般建议控制在 5 张以内、每张压缩到 100KB 以下。
3. 再进阶四款：把“看”变成“玩”
3.1 点击爆心：鼠标交互与粒子爆发
前一款是单向播放，这一款是双向互动。逻辑很简单：监听点击，在点击位置生成一批速度随机的小粒子，每帧更新位置并加一点重力或阻尼。
const bursts = []; canvas.addEventListener('click', e => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; for (let i = 0; i < 26; i++) { const a = Math.random() * Math.PI * 2; const sp = 1.6 + Math.random() * 3.4; bursts.push({ x, y, vx: Math.cos(a) * sp, vy: Math.sin(a) * sp, life: 1, size: 1.2 + Math.random() * 2 }); } });在主循环里遍历bursts，每帧执行vx *= 0.96（阻尼）、vy += 0.06（轻微重力）、life -= 0.018，life小于 0 就移除。用life直接当透明度，粒子会自然淡出，不需要额外的过渡处理。
移动端要特别注意：点击事件在手机上会有 300 毫秒延迟，而且手指点击位置比鼠标粗。建议同时监听touchstart，并且在事件处理里加e.preventDefault()防止页面被拖动。粒子数量在手机上减半，26 个改成 14 个，不然连点几下就卡了。
3.2 花瓣与星点飘落背景：低成本的氛围感
这是典型的“投入产出比极高”的效果，十几行代码就能让整个页面的档次上一个台阶。思路是维护一个数组，每个元素有 x、y、横向漂移速度、旋转角，超出底部就重置到顶部。
function makePetal() { return { x: Math.random() * W, y: -20 - Math.random() * H, vy: 0.4 + Math.random() * 1.1, sway: 0.4 + Math.random() * 0.9, phase: Math.random() * Math.PI * 2, rot: Math.random() * Math.PI, vr: (Math.random() - 0.5) * 0.02, size: 5 + Math.random() * 7 }; }每帧x += Math.sin(phase + time * 0.001) * sway制造左右摇摆，y += vy下落，rot += vr自转。用ellipse画一个椭圆就是花瓣，画两颗交叉的细线就是雪花。数量控制在 40 到 70 之间，太多会抢主体爱心的视觉焦点。
心得：花瓣颜色不要用纯白或纯粉，用带一点透明度的浅色（比如
rgba(255,182,193,0.55)），叠加在深色背景上才有层次。纯色会显得很廉价。
3.3 音乐律动爱心：Web Audio API 取频域数据
这一款技术含量最高，也最容易出仪式感。原理是用AudioContext接一个AnalyserNode，每帧读取频谱数据，取低频段（通常是前 8 个频段）的平均值当作“能量”，用这个能量去驱动爱心的缩放和粒子扩散。
let audioCtx, analyser, dataArr, started = false; function initAudio() { audioCtx = new (window.AudioContext || window.webkitAudioContext)(); analyser = audioCtx.createAnalyser(); analyser.fftSize = 256; // 得到 128 个频段 dataArr = new Uint8Array(analyser.frequencyBinCount); const audio = document.getElementById('bgm'); const src = audioCtx.createMediaElementSource(audio); src.connect(analyser); analyser.connect(audioCtx.destination); // 别忘了接回输出，否则没声音 } function getEnergy() { analyser.getByteFrequencyData(dataArr); let sum = 0; for (let i = 0; i < 8; i++) sum += dataArr[i]; return sum / 8 / 255; // 归一化到 0~1 }两个必须知道的坑。第一，fftSize必须是 2 的整数次幂，256、512、1024 都可以，值越大频率分辨率越高但延迟也越大，表白场景用 256 响应最跟手。第二，浏览器的自动播放策略会拦截音频，页面加载后音频默认是挂起状态，必须在用户点击之后调用audioCtx.resume()。所以一定要做一个“点击开始”的入口按钮或者全屏点击层，别指望打开就响。
能量值用起来很直观：scale = 1 + energy * 0.35，套在爱心的绘制变换上，音乐重拍时爱心会“砰”地胀一下。我试过把能量同时映射到粒子的扩散半径上，效果比单纯缩放更炸。
3.4 答题解锁式表白页：状态机做关卡
这一款适合想铺长线的场景。技术上就是一个状态机：当前处在第几题、答对是否进入下一题、全对之后显示什么。
const quiz = [ { q: '我们第一次见面是哪一天？', a: ['2023-09-01'] }, { q: '我最常点的那家店叫什么？', a: ['巷口面馆', '巷口'] }, { q: '下一句你想听我说什么？', a: [] } // 空答案表示任意输入都算对 ]; let step = 0; function submit(val) { const cur = quiz[step]; const ok = cur.a.length === 0 || cur.a.some(a => val.trim().includes(a)); if (!ok) return shakeAndHint(); step++; step >= quiz.length ? reveal() : renderQuestion(); }a用数组是因为答案写法经常不统一，比如“巷口面馆”和“巷口”都应该算对。用includes做包含匹配比全等匹配宽容得多。第三题故意留空答案，是为了让对方必须写点什么——这个设计的心理效果比从前两题好得多，参与感完全不同。
提示语也要设计。答错时不要直接说“错了”，用“再想想，那天好像下雨了”这类带线索的话，既不打击人又能引导。这是产品思维，不是技术思维，但决定了最终体验。
4. 脚本与终端里的三款浪漫：Python 与命令行
4.1 终端彩色爱心：ANSI 颜色与帧刷新
如果对方是写代码的，这一款的反差感最强。核心是用 ANSI 转义序列给终端字符上色，格式是\033[38;2;R;G;Bm后面跟字符，再用\033[0m复位。
import math import sys import time # 24 位真彩色，宽高比修正系数让爱心在字符栅格上不被拉扁 WIDTH, HEIGHT = 60, 30 ASPECT = 2.1 def heart_sdf(x, y): """返回点是否在心形内部，用隐式方程判断""" x = x / 1.0 y = -y / 1.0 f = (x * x + y * y - 1) ** 3 - x * x * (y ** 3) return f <= 0 def render(scale, pulse): lines = [] for row in range(HEIGHT): line = [] for col in range(WIDTH): # 把字符坐标映射到 [-1.6, 1.6] 的数学坐标 x = (col - WIDTH / 2) / (WIDTH / 3.2) / scale y = (row - HEIGHT / 2) / (HEIGHT / 3.2) * ASPECT / scale if heart_sdf(x, y): t = (col / WIDTH + row / HEIGHT) / 2 r = int(220 + 35 * pulse) g = int(40 + 60 * t) b = int(90 + 120 * t) line.append(f"\033[38;2;{r};{g};{b}m█\033[0m") else: line.append(" ") lines.append("".join(line)) return "\n".join(lines) for i in range(120): pulse = (math.sin(i * 0.18) + 1) / 2 # 0~1 循环，制造心跳 sys.stdout.write("\033[H\033[J") # 光标归位 + 清屏 sys.stdout.write(render(1.0 + pulse * 0.06, pulse)) sys.stdout.flush() time.sleep(0.05)几个关键点。ASPECT = 2.1是字符宽高比修正，终端里一个字符高约为宽的 2 倍，不修正的话爱心会被纵向拉长成水滴形。\033[H\033[J是光标归位加清屏的组合，比单纯的清屏闪烁更小。刷新间隔 0.05 秒约等于 20 帧，终端渲染吃不了太高帧率，再快反而是浪费。
如果你的终端不支持真彩色（比如某些精简版 Linux 终端或老版 Windows 控制台），可以用 8 色模式替代，把38;2;r;g;b换成31（红）或35（紫）。现代 Windows Terminal、macOS 终端、Ubuntu 的 GNOME Terminal 都支持真彩色，基本不用降级。
4.2 字符画与几何玫瑰：用数学公式画图
同一条思路可以扩展到玫瑰线。极坐标下的玫瑰线方程是r = a * cos(k * θ)，k 取偶数时得到 2k 片花瓣，取奇数时得到 k 片。把 θ 扫一遍，把极坐标转成直角坐标，再映射到画布上，就得到一朵数学玫瑰。
import math from PIL import Image, ImageDraw SIZE = 900 img = Image.new("RGB", (SIZE, SIZE), (12, 12, 20)) draw = ImageDraw.Draw(img) # 用多条不同参数的玫瑰线叠加，形成花瓣层次 layers = [ (7, 380, (255, 60, 120)), (5, 300, (255, 120, 170)), (3, 200, (255, 200, 220)), ] for k, a, color in layers: pts = [] for i in range(2000): theta = i / 2000 * math.pi * 2 r = a * math.cos(k * theta) x = SIZE / 2 + r * math.cos(theta) y = SIZE / 2 - r * math.sin(theta) pts.append((x, y)) draw.line(pts, fill=color, width=3, joint="curve") img.save("rose.png")三层玫瑰线叠在一起，最外层的 7 片花瓣做轮廓，中间 5 片和 3 片做内层，颜色由深到浅，会形成一种类似水彩晕染的层次。joint="curve"这个参数容易被忽略，不写的话折线连接处会有明显棱角。
需要说明的是这里用了 Pillow 库来生成图片文件，如果你只想在终端看，把绘制目标从ImageDraw换成字符栅格数组就行，逻辑完全一样。
4.3 一键导出 GIF 或长图，方便发出去
有些平台不放链接，或者对方根本不会打开网页，那最稳的办法是导出成图片或动图。Canvas 的做法是逐帧渲染后调用canvas.toBlob()，把每一帧塞进一个 GIF 编码器（前端常用 gif.js 这类库，需要内联进单文件）。
如果不想折腾编码器，还有个更省事的办法：用 Python 的 Pillow 直接合成 GIF。把前面玫瑰图的逻辑改成逐帧改变脉冲参数，每帧存一张 PNG，最后统一合成：
frames = [] for i in range(40): pulse = (math.sin(i * 0.16) + 1) / 2 frame = draw_frame(pulse) # 返回一张 PIL Image frames.append(frame.convert("P", palette=Image.ADAPTIVE)) frames[0].save( "heart.gif", save_all=True, append_images=frames[1:], duration=60, loop=0 )duration=60是每帧 60 毫秒，约 16 帧每秒，文件大小和流畅度比较平衡。loop=0表示无限循环。注意必须先转成 P 模式（调色板模式）才能存 GIF，直接存 RGB 会报错。调色板模式下颜色数会被压到 256 色以内，渐变会有一点色带，这是 GIF 格式本身的限制，接受就好。
5. 性能、兼容与必踩的坑
5.1 高清屏发虚、粒子多了卡顿怎么调
第一个高频问题是“做出来在手机上看着糊”。原因几乎都是没做设备像素比适配。Canvas 的width/height属性和 CSS 的width/height是两回事：前者是绘图缓冲区的实际像素数，后者是显示尺寸。在 2 倍屏上如果两者相等，浏览器会把 1 个像素拉成 2 个显示，边缘就毛了。
正确做法就是前面代码里那段：缓冲区尺寸乘以devicePixelRatio，CSS 尺寸保持逻辑尺寸，然后用ctx.setTransform(dpr, 0, 0, dpr, 0, 0)把坐标系缩回来。这样你后面所有的绘制坐标仍然按逻辑像素写，不用到处乘 dpr。
第二个问题是卡顿。排查顺序我一般是这三步：先看粒子数量，一般超过 1000 就该减；再看是不是每帧都创建了新对象（new在循环里是大忌，会造成频繁垃圾回收）；最后看有没有在每帧里读 DOM 属性，比如反复读canvas.width或getBoundingClientRect()，这些都会触发强制重排。
一个立竿见影的优化是把粒子对象池化：初始化时一次性创建固定数量，循环里只改属性不新建。另一个是把ctx.beginPath()提到循环外，同一颜色的粒子合并成一次绘制——不过粒子的颜色带随机透明度，分不了批，那就退而求其次，把粒子尺寸的随机范围收窄，减少状态切换。
5.2 移动端与内置浏览器的打开姿势
这是最现实的坑。很多人做完了，通过聊天工具把 html 文件发过去，对方点开是空白或者显示源码。原因有两层：一是文件后缀问题，二是打开方式问题。
关于后缀，这是新手最容易翻车的点。用记事本写完代码直接保存，Windows 会默认存成xxx.txt，看起来图标还是记事本，双击打开当然只显示源代码。必须在保存时把“保存类型”改成“所有文件”，文件名写完整的love.html。如果已经存成 txt 了，去文件夹里把扩展名显示打开，手动改掉。电脑上如果隐藏了扩展名，你可能改完还是love.html.txt，这个一定要确认。
关于打开方式，聊天工具内置的浏览器对本地 HTML 文件的处理各不相同。有的会直接下载，有的会尝试预览但禁用脚本。最稳的方案有两条：改成链接发出去，或者干脆截图/录屏发。如果坚持发文件，建议同时发一句“下载后用浏览器打开”，并且在自己手机上先完整测一遍。
还有一个隐藏问题：100vh在手机浏览器上会因为地址栏的显示隐藏而变化，导致元素跳动。稳妥写法是用height: 100dvh并给100vh做回退，或者用position: fixed; inset: 0让容器撑满视口。
5.3 常见问题速查表
| 现象 | 大概率原因 | 处理方式 |
|---|---|---|
| 双击打开是源代码 | 文件后缀是 .txt | 改后缀为 .html，确认扩展名已显示 |
| 页面全白无内容 | 脚本报错中断 | 按 F12 看 Console 报错行号 |
| 中文显示成乱码 | 编码不是 UTF-8 | 在 head 里加<meta charset="UTF-8">，文件另存为 UTF-8 |
| 手机上画面很糊 | 未做 dpr 适配 | 按 5.1 的方法放大缓冲区 |
| 音频点开不响 | 自动播放被拦截 | 做一个点击入口，在回调里 resume |
| 粒子跑到屏幕外 | 缩放系数写死 | 用Math.min(W,H)动态计算 |
| 微信里点开是下载 | 内置浏览器不解析本地文件 | 改为发链接或发录屏 |
| 照片不显示 | 引用了本地路径 | 转 base64 内联进 src |
| 爱心被拉长 | 未做宽高比修正 | 终端场景乘以宽高比系数 |
注意：调试移动端问题时，别一上来就改代码。先在电脑上用浏览器的设备模拟模式跑一遍，按 F12 打开控制台看报错。绝大多数“手机上不行”的问题，在电脑模拟模式下都能复现，省下大量来回传文件的时间。
6. 做完之后怎么送到对方手上
6.1 单文件打包、改标题、换文案
交付前有几个固定动作，我每次都会过一遍。第一是改<title>，浏览器标签页上显示的那行字，很多人会忽略，但对方第一眼看到的就是它，写一句有分量的话比写“love”合适得多。第二是内联所有资源，图片转 base64，字体用系统字族，脚本不引外链。第三是去掉调试代码，尤其是console.log和临时写的注释。
文件大小也要控制。纯 Canvas 的粒子特效，压缩前大概 5 到 10KB；带三张 base64 图片的相册大概 300KB 到 500KB；如果还内联了背景音乐，很容易超过 2MB。我的经验是把总量压在 1MB 以内，超过之后手机端加载会明显有等待感，那几秒钟的空白足以消解掉一半的惊喜。
如果确实需要音乐，可以在页面里做一个“点击开始”的封面层，用这一层的时间去加载音频，既解决了自动播放限制，又掩盖了加载等待。这个设计一举两得。
6.2 静态托管与链接分享的取舍
发链接是体验最好的方式，因为没有“下载再打开”的中断。做法也很简单：把 html 文件传到任意静态页面托管服务上，拿到一个网址发过去就行。国内可以用 Gitee Pages 这类代码托管平台自带的静态页面功能，把文件 push 上去再开启 Pages 服务；也可以用 Netlify、Vercel 这类平台，直接把文件拖进上传区就能拿到域名，全程不用敲命令。
这里有个实用技巧：文件名不要起得太直白，比如for-you-2024.html就比love.html好，前者像一个私密链接，后者一看就知道是什么。另外链接尽量用短域名或自定义路径，太长的一串字符在聊天窗口里会被折叠，看起来像广告，点击率会下降。
如果对方确实只能收图片或视频，那就退回到 4.3 的方案，导出 GIF 或者直接录屏。录屏其实是最被低估的方案——你可以在录的时候同步播放音乐，成片的信息量比一个静默的 GIF 大得多，而且完全不挑设备。
7. 我踩过的坑和几条私藏心得
7.1 别把彩蛋做成负担：节奏与文案
技术做完了，最后决定成败的其实是节奏和文案。我做过一个复盘：同一个爱心粒子效果，A 版本打开三秒后直接出现“我喜欢你”，B 版本先让粒子从四周飘进来聚成心形，等心形稳定后再淡入文字。B 版本的反馈明显更好，差别就在那几秒的等待。
具体来说，我现在的默认节奏是：0 到 2.5 秒粒子聚拢，2.5 到 3 秒心形稳定并轻微脉动，3 秒后文字缓慢淡入，文字打完后背景飘落花瓣。这几秒的留白是给情绪的，不是浪费。很多人急着把所有东西一股脑堆在第一屏，反而让人来不及反应。
文案上有个小原则：少用感叹号，多用句号。“我喜欢你”比“我喜欢你！！！”稳得多。还有，不要写太长，三到五行够了，多了会变成说教。真正打动人的往往是具体的小事，比如“那天你穿的那件灰外套”比“你是我生命中的光”有效得多。
7.2 一些让成品质感提升的小改动
最后分享几个改动量极小、但质感提升明显的细节。
第一个是给所有淡入加缓动曲线。默认的linear淡入很生硬，改成cubic-bezier(0.22, 1, 0.36, 1)这种先快后慢的曲线，观感会柔和非常多。这个参数在 CSS 的transition-timing-function里设一次就够了。
第二个是给爱心加呼吸感。在粒子的目标位置上叠加一个1 + Math.sin(time * 0.002) * 0.03的缩放系数，整个心形会缓慢地一胀一缩。幅度很小，只有 3%，但视觉上立刻有了生命感。这个细节我认为是粒子特效和“死图”之间的分界线。
第三个是给背景加一层极淡的噪点或渐变。纯黑的背景在 OLED 屏上显得很空，叠一层从深蓝紫到纯黑的径向渐变，画面立刻有了深度。用 CSS 的radial-gradient一层就够了，不用生成图片。
第四个是加一个交互后的反馈，哪怕只是点击后爱心轻微一顿、或者飘出两句小字。人一旦发现自己能影响画面，就会愿意多玩几十秒，而这几十秒里，你写的那几句话就有机会被读完。
这些改动单个看起来都很小，加在一起就是“看起来像成品”和“看起来像作业”的差距。我个人的排序是：呼吸感 > 缓动曲线 > 背景渐变 > 交互反馈，如果时间有限，至少把前两个做上。