单文件HTML轻松实现满屏爱心弹窗，零依赖可自定义

如果你想把“满屏爱心弹窗”做成一个真正能打动人的小惊喜最值得花时间研究的不是弹窗数量而是实现方式。市面上的教程很多但大部分一上来就让你用 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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.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 idheartCanvas/canvas div classlove-modal idmodal p idmsg/p button classbtn idbtn收到/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 /html2.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 毫秒后也会自动关闭。这种方式既接近“