如果你想把“满屏爱心弹窗”做成一个真正能打动人的小惊喜，最值得花时间研究的不是弹窗数量，而是实现方式。市面上的教程很多，但大部分一上来就让你用 Python 装环境、装库，最后对方电脑上根本没有 Python，双击也不知道怎么运行，惊喜直接变成演示事故。
我给你的建议是：用一份单文件 HTML。它不需要任何额外环境，浏览器打开就能看，能自定义文案、颜色、爱心数量和动效，也能随时关闭。这篇文章按实际落地顺序拆一遍：先确定方案，再给完整代码，然后讲怎么改成你的专属版本，最后说发送时最容易踩的坑。
1. 先想清楚：你要的是“满屏”，还是“弹窗”，还是两者都要
很多人搜“爱心弹窗代码”时，其实心里想的是两种完全不同的效果。一种是打开页面后满屏爱心飘动，另一种是像系统通知一样连续弹出写满情话的小窗口。这两种效果技术上都简单，但适合的场景不一样，得先分清。
1.1 三种常见实现方式对比
| 实现方式 | 运行条件 | 实际效果 | 适合场景 |
|---|---|---|---|
| HTML + CSS + JS 单文件 | 任意现代浏览器 | 满屏爱心粒子 + 自定义弹窗卡片 | 给对象、朋友或自己在本地演示 |
| Python tkinter | 需要安装 Python 和 Tk | 系统窗口 + 画布绘制爱心 | 自己学习 Python 时练手 |
| Windows 批处理脚本 | Windows 系统 | 早期是用 cmd 循环弹窗 | 效果粗暴，容易被杀毒软件拦，不建议 |
如果只追求“拆开即用”，HTML 方案优势非常明显。尤其当你准备把代码发给一个不熟悉编程的人时，对方只需要双击文件，剩下的交给浏览器。
1.2 为什么我建议直接交出一个 HTML 文件
第一，零依赖。HTML 文件本身就是网页，不需要 pip install，不需要配置环境变量，不需要考虑 Python 版本。只要对方手机或电脑上有浏览器，就能打开。
第二，一个文件就是全部。所有样式、逻辑、文案、颜色都写在同一个.html里，发送时不用打包，不用压缩，不用担心少传一个 CSS 文件。微信、QQ、钉钉、邮件都能直接传，对方接收后保存下来，双击即可。
第三，效果好且可控。Canvas 可以画出大量心形粒子，CSS 可以做出很优雅的弹窗卡片，JS 可以让文案按顺序出现。相比用系统自带的alert()弹窗，网页版不会触发浏览器的“阻止此页面创建更多对话框”，也不会因为反复弹窗而被系统强制关掉。
第四，能随时关闭。页面右上角关闭按钮就能退出，或者再点一下弹窗上的“收到”按钮，流程就结束了。这样对方不会觉得被骚扰，反而会觉得这是一段用心准备的小互动。
我一般会把第一次测试拆成三步：先把文件在自己电脑上打开，确认文案顺序；再检查爱心数量和速度是否合适；最后发给对方。不要刚写完代码就发出去，尤其是文案里如果写了对方的名字，最好先自己完整看一遍。
2. 一个能直接打开的 HTML 版本，完整代码在这里
下面这份代码是我按“满屏爱心 + 弹窗文案”的思路写的。复制到记事本，保存为love.html，用 Chrome 或 Edge 打开就能看到效果。选 Chrome 或 Edge 是因为它们对 Canvas 和requestAnimationFrame支持最稳定。
2.1 页面结构：画布、弹窗卡片和样式
页面由三部分组成：底部深色背景、全屏 Canvas 画布、居中弹窗卡片。Canvas 负责画满屏爱心，弹窗卡片负责展示想说的话。
<!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> * { margin: 0; padding: 0; box-sizing: border-box; } body { overflow: hidden; height: 100vh; background: radial-gradient(circle at 50% 30%, #2d1020, #12000e); font-family: "Microsoft YaHei", "PingFang SC", "Noto Sans SC", sans-serif; user-select: none; } #heartCanvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; } .love-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.85); background: rgba(255, 255, 255, 0.95); border-radius: 18px; padding: 26px 30px; max-width: 76vw; z-index: 20; text-align: center; font-size: 20px; font-weight: 600; color: #c9184a; box-shadow: 0 12px 40px rgba(255, 77, 109, 0.45); opacity: 1; transition: opacity .3s, transform .3s; display: none; } .love-modal.show { display: block; opacity: 1; transform: translate(-50%, -50%) scale(1); } .love-modal .btn { margin-top: 14px; display: inline-block; padding: 8px 24px; background: linear-gradient(135deg, #ff4d6d, #ff758f); border: none; border-radius: 999px; color: #fff; font-size: 14px; cursor: pointer; } </style> </head> <body> <canvas id="heartCanvas"></canvas> <div class="love-modal" id="modal"> <p id="msg"></p> <button class="btn" id="btn">收到</button> </div> <script> // ===== 可调参数 ===== const CONFIG = { heartCount: 60, minSize: 14, maxSize: 26, speedMin: 0.6, speedMax: 1.6, messages: [ "听说你最近总在看别人的代码", "所以我也偷偷给你写了一屏幕", "满屏爱心，都是想对你说的话", "今天也要开开心心" ] }; // ===== 画布准备 ===== const canvas = document.getElementById('heartCanvas'); const ctx = canvas.getContext('2d'); let W = 0; let H = 0; function resize() { W = canvas.width = window.innerWidth; H = canvas.height = window.innerHeight; } window.addEventListener('resize', resize); resize(); // ===== 绘制一颗心 ===== function drawHeart(x, y, size, color) { const s = size / 10; ctx.beginPath(); ctx.moveTo(x, y + 4 * s); ctx.bezierCurveTo(x - 2.5 * s, y - 1.5 * s, x - 5 * s, y - 4 * s, x - 8 * s, y - 1 * s); ctx.bezierCurveTo(x - 10 * s, y + 1.5 * s, x - 8 * s, y + 5 * s, x, y + 10 * s); ctx.bezierCurveTo(x + 8 * s, y + 5 * s, x + 10 * s, y + 1.5 * s, x + 8 * s, y - 1 * s); ctx.bezierCurveTo(x + 5 * s, y - 4 * s, x + 2.5 * s, y - 1.5 * s, x, y + 4 * s); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); } // ===== 创建一颗爱心 ===== function randomColor() { return 'hsl(' + (340 + Math.random() * 40) + ', ' + (72 + Math.random() * 28) + '%, ' + (58 + Math.random() * 30) + '%)'; } function createHeart(fromBottom) { return { x: Math.random() * W, y: fromBottom ? H + 20 : Math.random() * H, size: CONFIG.minSize + Math.random() * (CONFIG.maxSize - CONFIG.minSize), sy: CONFIG.speedMin + Math.random() * (CONFIG.speedMax - CONFIG.speedMin), sx: (Math.random() - 0.5) * 1, alpha: 0.5 + Math.random() * 0.4, color: randomColor(), rotate: Math.random() * Math.PI * 2 }; } let hearts = []; for (let i = 0; i < CONFIG.heartCount; i++) { hearts.push(createHeart(false)); } // ===== 动画循环 ===== function animate() { ctx.clearRect(0, 0, W, H); for (let h of hearts) { h.y -= h.sy; h.x += h.sx; h.rotate += 0.003; if (h.y < -30 || h.x < -30 || h.x > W + 30) { Object.assign(h, createHeart(true)); } ctx.save(); ctx.globalAlpha = h.alpha; ctx.translate(h.x, h.y); ctx.rotate(h.rotate); drawHeart(0, 0, h.size, h.color); ctx.restore(); } requestAnimationFrame(animate); } animate(); // ===== 弹窗逻辑 ===== const modal = document.getElementById('modal'); const msg = document.getElementById('msg'); const btn = document.getElementById('btn'); let msgIndex = 0; let timer = null; function showModal() { if (msgIndex >= CONFIG.messages.length) return; msg.textContent = CONFIG.messages[msgIndex++]; modal.classList.add('show'); modal.style.display = 'block'; if (timer) clearTimeout(timer); timer = setTimeout(closeModal, 2600); } function closeModal() { if (timer) clearTimeout(timer); modal.classList.remove('show'); modal.style.display = 'none'; setTimeout(showModal, 700); } btn.addEventListener('click', closeModal); setTimeout(showModal, 800); </script> </body> </html>2.2 核心逻辑：为什么爱心会“满屏”
代码里最核心的部分是按心形曲线绘制路径。这是数学公式x = 16 * sin(k) ^ 3、y = 13 * cos(k) - 5 * cos(2k) - 2 * cos(3k) - cos(4k)的简化写法，用三次贝塞尔曲线拟合出心形轮廓。
动画循环里，每颗爱心都保存了自己的坐标、大小、上升速度、左右飘移、透明度和旋转角度。每次requestAnimationFrame会把爱心往屏幕上方移动一点，同时让爱心轻微旋转。当爱心飘出屏幕上边缘或者左右边缘后，代码会调用createHeart(true)重新在屏幕底部生成一颗爱心，这样看起来就像爱心源源不断从底部升起。
这里的重点是“随机”和“渐变”。初始生成爱心时使用createHeart(false)，让 60 颗爱心随机分布在整屏，所以对方打开页面的一瞬间就已经是满屏效果，而不是从底部慢慢爬上来。
2.3 弹窗消息为什么不用 alert
如果你改成alert()，现代浏览器会很快拦截连续弹窗，而且弹窗会打断页面动画，体验非常生硬。所以这里用了一个自定义卡片div，点击“收到”按钮后关闭，700 毫秒后出现下一条文案，2600 毫秒后也会自动关闭。这种方式既接近“
