简介一份以HTML、CSS和JavaScript编写的表白代码套餐适合想用技术表达心意、同时学习前端基础的程序爱好者。压缩包共21个文件包含12个JS脚本、4个HTML页面、3个CSS样式表另有1个MP3背景音乐和1个PHP后端脚本整体约850KB结构清晰。页面通过标题、段落等标签组织内容用CSS控制配色、字体与心跳动画并借助JavaScript实现点击爱心、动态展示信息等交互效果。已有4329人学习下载。用户只需替换页面中的姓名和恋爱时间即可生成专属表白页面同时还能从中理解DOM操作、事件监听、keyframes动画等知识点是一份兼具浪漫与学习价值的练手资源。1. HTML表白代码套餐先搞清楚这是在帮你解决什么问题把「HTML表白代码套餐」搜出来的人一半是想找个现成页面直接转发出去另一半则更想知道为什么同样是 HTML 网页制作网上那些爱心粒子特效表白 HTML 代码能那么顺滑自己抄下来却白屏、错位、按钮点了没反应。这个标题看着是玩票实际是一类非常典型的模板工程——结构上不过几十个 HTML 标签动效靠的是 CSS 动画在时间轴上不断变换关键帧而粒子效果则依赖 JavaScript 操作 Canvas 逐帧绘制。这套「结构 样式 行为」三层是 Web 前端的骨架只是表白代码把它浓缩在了一个页面里。这篇文章从最小可运行版本讲起把动画参数调参、移动端适配、兼容性排错和上线部署几条路都走一遍适合能看懂代码、但还没系统写过动画和 Canvas 的 IT 从业者。2. 拆解表白页面的三层技术结构、动画与粒子渲染2.1 表白页最常见的是哪三块HTML 标签、CSS 动画和 Canvas打开任意一份能正常运行的 HTML 表白代码你看到的通常不是一条从头写到尾的代码而是三个职责清晰的层。第一层是语义结构负责承载文字、按钮、背景图和音乐播放器第二层是视觉样式负责把普通 div 变成跳动的心形、渐变的天空和上下浮动的光点第三层是交互行为负责处理点击、滚动和入场动画的时间顺序。这里有个很多人会误会的点HTML 标签本身不做任何动画它只提供节点字体变大变小、位置移动、透明度变化全部由 CSS 的transform、opacity和transition完成粒子从中间散开、聚成一个心形则必须靠 JavaScript 去操作 Canvas 上每个粒子的坐标。以我调页面的习惯第一步是把这三层在文件里分开写好别把内联样式满天飞地塞进 HTML 标签里否则后面改一个参数要翻遍整个文件。下表是我在检查各类表白代码模板时习惯列出的分层清单你也可以照着它给自己的页面做体检。技术层常见实现方式负责表现出问题时看的调试面板结构层HTML5 语义标签section、播放器audio、按钮button文案、入口、媒体裸奔时也能读懂页面Elements 面板看节点是否渲染样式层内联style块、CSS 变量、keyframes渐变、心形、缩放、浮动全部视觉变化Styles 面板看动画属性是否生效行为层script里的 Canvas 粒子、事件监听粒子飘散、打字机、倒计时、点击回馈Console 面板看报错Sources 面板断点没有这三层静态页面也能表白但会像一张贴在墙上的海报加上动画之后才更像一个「会呼吸的页面」这是表白代码和普通 HTML 网页制作的最大区别也是你要学它的价值点。2.2 用 CSS 动画做出「正在跳动」的心形我见过不少人对动效的第一反应是去引入体积很大的动画库但在表白这种小页面里最可靠的做法反而是一帧一帧写 CSS。心形跳动本质上只有两个动作整体从 1.0 缩放到 1.1再回到 1.0配合ease-in-out缓动函数就会产生呼吸一样的节奏。这里的关键不是动画本身而是你要明白一件事动画不是由「跳」实现的而是由「跳之间的时间间隔」实现的。.heart { width: 120px; height: 120px; background: #ff4d6d; transform: rotate(45deg); animation: heartbeat 1.2s ease-in-out infinite; } .heart::before, .heart::after { content: ; position: absolute; width: 120px; height: 120px; background: #ff4d6d; border-radius: 50%; } .heart::before { left: -60px; } .heart::after { top: -60px; } keyframes heartbeat { 0% { transform: rotate(45deg) scale(1); } 25% { transform: rotate(45deg) scale(1.1); } 40% { transform: rotate(45deg) scale(0.95); } 60% { transform: rotate(45deg) scale(1.1); } 100% { transform: rotate(45deg) scale(1); } }这段代码先用一个正方形旋转 45 度做主体再用两个伪元素::before和::after画出左右两边的圆三个图形拼起来就是一个标准的心形轮廓。keyframes heartbeat里定义了五个关键帧25% 放大到 1.140% 缩小到 0.9560% 再放大到 1.1这一组「大-小-大」就是心跳的节奏感来源。动画属性1.2s ease-in-out infinite表示单次时长 1.2 秒、缓动为先慢后慢、无限循环。参数说明想调整心跳快慢就改animation里的1.2s改小会急促、改大会像慢动作想调力度就改关键帧里的scale(1.1)。这里不建议把transform: rotate(45deg)写进关键帧外的一个属性再在关键帧里单独写 scale因为transform是一个整体两处写不同内容会导致旋转角度被覆盖掉心形会变形。这是新手最容易踩的坑。2.3 一个直接双击运行的最小爱心粒子表白页面光有跳动的心形还是静态的真正让「套餐」有质感的是满屏飘散的爱心粒子。粒子效果基本都长一个样先做一堆初始坐标随机的小圆点然后用一个循环不断更新坐标和透明度最后用 Canvas 把它们画出来。这个做法和你处理 C 语言表白代码的思路很像——先定义数据再渲染再循环更新只是 C 语言输出到终端Canvas 输出到画布。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title爱心粒子/title style html, body { margin: 0; height: 100%; background: #1a1a2e; overflow: hidden; } canvas { display: block; } /style /head body canvas idcanvas/canvas script const canvas document.getElementById(canvas); const ctx canvas.getContext(2d); let w, h, particles []; const count 120; function resize() { w canvas.width window.innerWidth; h canvas.height window.innerHeight; } class Particle { constructor() { const t Math.random() * Math.PI * 2; const r Math.random() * 2 1.5; this.x w / 2; this.y h / 2; this.t t; this.r r; this.targetX w / 2 16 * Math.pow(Math.sin(t), 3); this.targetY h / 2 - (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); } update() { this.x (this.targetX - this.x) * 0.04; this.y (this.targetY - this.y) * 0.04; } draw() { ctx.fillStyle #ff4d6d; ctx.globalAlpha Math.abs(Math.sin(this.t * 10)); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fill(); } } function init() { particles []; for (let i 0; i count; i) particles.push(new Particle()); } function loop() { ctx.clearRect(0, 0, w, h); particles.forEach(p { p.update(); p.draw(); }); requestAnimationFrame(loop); } window.addEventListener(resize, () { resize(); init(); }); resize(); init(); loop(); /script /body /html把这整段复制成一个.html文件双击用浏览器打开就能看到粒子从中心散开、慢慢聚成一个心形的过程。脚本的逻辑分三条线resize()把画布铺满视口Particle类在构造函数里用参数方程算出每个粒子聚拢后的最终坐标loop()每帧调用requestAnimationFrame让粒子以 0.04 的系数向目标点移动同时用Math.abs(Math.sin(...))做出闪烁效果。参数说明count 120是粒子总数改大会让心形更密但 60fps 以下的低端手机会开始掉帧16 * Math.pow(Math.sin(t), 3)和13 * Math.cos(t) - 5 * Math.cos(2*t)...是心形参数方程决定了粒子的最终排列形状0.04是移动速度改大聚拢快、改小飘得慢我一般保持在 0.02 到 0.06 之间。页面的viewport设置不能删否则在手机上打开会自动缩放到一个小窗口里这也是搜「HTML 表白代码套餐」时出现频率极高的问题。3. 把表白代码改造成自己的配置化、文字、音乐与图片3.1 别改源码把文案和参数抽成一份 JS 配置网上拿到的表白代码模板大多数写得很死表白的话直接写在 HTML 里图片路径是image.jpg音乐地址是作者自己的服务器。你要是硬去源码里一处一处找着改改完第二天想换句话又得重来一趟。我一般拿到模板的第一件事是先把它「配置化」——把会变的东西全部挪到 JavaScript 顶部的一个对象里正文只负责读取。这样下来所谓的表白代码套餐就成了一套能反复套用的模板。window.LOVE_CONFIG { title: 给最特别的人, message: 从遇见你的那天起我的所有页面都开始跳动。, image: ./photo.jpg, music: ./bgm.mp3, startTime: 2024-06-01 20:00:00, showDays: true };这个配置对象放在script最早的位置后面的渲染逻辑只用LOVE_CONFIG取数据。title会写入页面标题和首屏文案message是滚动展示的话image是相册图片的相对路径music是背景音乐startTime可以配合一个倒计时函数在表白页加载时先显示「我们已经相识了 N 天」用这种有具体对象的做法比在网上重新找一个合心意模板来的方便得多。配置对象的另一个好处是可以和 URL 查询参数结合。比如在本机测试时想换文案又不想改文件我经常会直接用浏览器地址栏输入index.html?name某个人然后在脚本里用new URLSearchParams(location.search)去读把它追加到显示文本后面。但注意别把startTime写成2024-06-01 20:00:00这种含空格的格式最好改成 ISO 格式例如2024-06-01T20:00:00否则在 iOS Safari 上new Date()会直接返回 Invalid Date页面上的倒计时瞬间变成 NaN。3.2 打字机效果与图片预加载让文字和图片按顺序进场有了配置对象下一步就是让文案「打字机」式地逐字出现。打字机实现不复杂核心是setInterval每隔固定时间往目标节点追加一个字符直到写完。这里容易踩的坑有两个一是字符串里有 HTML 标签比如span逐字追加时会出现半个标签导致样式错乱二是间距设得太短会让文字闪得快没有情绪。function typeText(el, text, speed 80, onDone) { let i 0; const timer setInterval(() { i; el.innerHTML text.slice(0, i); if (i text.length) { clearInterval(timer); if (onDone) onDone(); } }, speed); }调用方式typeText(document.getElementById(msg), LOVE_CONFIG.message, 100, () { document.querySelector(.btn).classList.add(show); });。参数里speed是每次追加字符的间隔单位毫秒80 到 120 之间人眼读起来都比较舒服onDone是打字结束后的回调适合用来在文字「打」完之后再显示按钮或开始播放音乐形成层次的入场面。写完打字机别忘了给图片做预加载。function preloadImage(src) { return new Promise((resolve, reject) { const img new Image(); img.onload () resolve(img); img.onerror reject; img.src src; }); }这里用Promise包装Image对象加载事件可以在图片加载完成后再执行入场动画避免页面都展示完了图片位置还是一块灰色空白。如果图片很大我建议在配置对象里加imageTimeout: 3000字段配合Promise.race做一个超时回退3 秒加载不出来就显示一张纯色渐变背景不要一直卡在白屏。这个 3 秒的兜底逻辑其实比图片本身更影响对方打开页面时的第一印象。3.3 HTML 表单之外的交互点击按钮触发的收尾动作表白页面通常不是单屏滚到底而是在文字和爱心粒子之后给一个按钮点击后出现最终的一句话或一张合影。这个交互的实现没有太多技术含量但它涉及「按钮可点区域」和「点击事件绑定时机」两个细节。很多模板在页面加载时脚本还没执行完按钮就已经渲染出来了用户快速点击时事件监听还没挂上去看起来就像「按钮坏了」。document.addEventListener(DOMContentLoaded, () { const btn document.getElementById(finalBtn); if (btn) { btn.addEventListener(click, () { document.getElementById(finalMsg).style.opacity 1; btn.disabled true; }); } });把事件绑定放在DOMContentLoaded里确保整个文档 DOM 解析完成后再挂监听这是解决点不动按钮最直接的办法。点击后btn.disabled true是为了防止重复点击触发多次动画许多表白代码模板忽略了这一行导致连续点击时页面动画会被反复重置。如果你把这段代码和前面的配置对象拼在一起实际上就已经做完了一个「带打字机 图片 按钮 背景音乐」的小填空页面剩下的只是把LOVE_CONFIG里的文案换成你要说的内容。4. 常见坑与排错图标显示不出来、页面白屏、移动端错位4.1 白屏和黑屏先分清是哪一层崩了打开表白页面变成白屏这个问题的排查顺序是有讲究的。常见原因按发生频率排列第一是 HTML 文件编码不是 UTF-8 导致乱码第二是外部 CDN 资源加载失败第三是脚本运行到一半抛错停止了后续代码。遇到白屏时我会先看 Console如果有红色报错信息就按报错的第几行去查如果 Console 干净但页面空白就要去 Elements 面板看 body 底下到底有没有节点。导致「HTML 文件无法预览」这个搜索词高频出现的原因大多不是代码本身有错而是双击.html文件时浏览器以file://协议打开JavaScript 读取相对路径资源时会有跨域限制。比如代码里写了fetch(./data.json)或import一个本地 js 模块双击打开必然报错但同一个文件放到http://localhost下就正常。解决这个问题的标准做法是本地起一个静态服务器在文件目录里执行python3 -m http.server 8080没有 Python 用npx serve .也行再访问http://localhost:8080/index.html。如果你平时用的是 Visual Studio Code新建 HTML 文件后可以直接装一个 Live Server 插件右键选 Open with Live Server效果同理由能直接复现「换上服务器就正常」的场景。4.2 手机上爱心跑到屏幕外面去了表白代码移动端错位的重灾区不在 CSS而在「视口没设置」。如果你打开手机浏览器后发现整个页面被缩放成一个小方块或者爱心跑到屏幕外先检查head里有没有这一行meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalablenowidthdevice-width让布局视口等于设备宽度initial-scale1.0是做初始缩放比例user-scalableno禁止双指缩放。这里要说明user-scalableno对无障碍并不友好但它能避免用户在手机上双击时触发页面自动缩放导致的动画错位这个取舍我在做表白这类 H5 时会选禁止缩放因为核心诉求是保证动画在有限屏幕内完整呈现。除了视口还要检查有没有用window.innerHeight来计算画布高度。在移动端浏览器里地址栏显示和隐藏会实时改变innerHeight我一般会监听resize事件重新设置画布尺寸像第 2 章代码里写的那样并在事件里加上防抖否则用户在手机上上下滑动页面时爱心会因为画布高度频繁变化而不断闪烁。4.3 背景音乐、字体和按钮在手机上的三个坑背景音乐是最容易出状况的部分。iOS 系统的 Safari 不允许页面加载时自动播放带声音的audio必须等用户触屏一次才能播放这和桌面浏览器行为不同。解决方式是在页面第一次点击按钮时通过audio.play()触发一次播放然后在回调里把状态存起来。现象大概率原因排查手段音乐不出声没触发过play()、音频格式不支持检查音频是否 MP3 格式确认代码里有没有用户手势按钮文字显示成方框字体引用的 ttf/otf 格式太大、加载慢改用 woff2 字体格式或者用系统字体栈font-family: sans-serif粒子动画掉帧粒子数量太多、循环里做了大量 DOM 操作调小count检查loop里是否只是 Canvas 绘制没有操作 DOM关于字体很多模板会引入中文字体文件但中文字体动辄几 MB在手机上加载要等很久。我的做法是第一版先不加自定义字体用系统字体跑通最后再决定是否用font-display: swap让文字先显示再切换字体。如果对方打开页面时一半时间都在等字体那再好看的排版也会输给「打不开」三个字。下面这段脚本可以当作「手机环境检测」的兜底逻辑当在 iOS 或 Android 上打开时给 html 加对应 class方便在 CSS 里针对不同系统微调安全区、底部间距等细节。这段代码放着不用也没副作用但需要的时候能省大量调试时间。const ua navigator.userAgent || ; document.documentElement.classList.toggle(is-ios, /iPhone|iPad|iPod/i.test(ua)); document.documentElement.classList.toggle(is-android, /Android/i.test(ua));classList.toggle的第一个参数是类名第二个参数是一个布尔值为真时加上类为假时移除类。利用这个逻辑你可以在 CSS 里写.is-ios .footer { padding-bottom: constant(safe-area-inset-bottom); }让按钮在 iPhone 底部的小横条上方正常显示不至于被遮住一半。这是移动端落地里很琐碎、但对方第一眼就能感受到差异的点。5. 把“套餐”部署到线上Nginx 静态服务配置与验收清单表白页面做完之后最终目的是生成一个链接发给对方。部署方式有很多种最常见也最可控的是把它放到一台云服务器上再用 Nginx 托管静态文件。下面的配置是一个最小可用版本适合单体 HTML 项目。注意如果服务器在国内记得提前做好域名备案和 HTTPS 证书否则分享出去的页面在微信里打开会被拦。sudo apt-get update sudo apt-get install -y nginx sudo cp -r /path/to/love-page /var/www/love/path/to/love-page是你本地代码目录整个服务只需要这个目录能通网即可。部署时要注意把LOVE_CONFIG里的image和music路径改成相对路径并保证大小写和文件名完全一致因为 Linux 的文件系统是区分大小写的这和 Windows 下双击预览完全不一样。server { listen 80; server_name love.example.com; root /var/www/love; index index.html; location / { try_files $uri $uri/ /index.html; } }try_files $uri $uri/ /index.html这行的作用是每个请求先找对应的物理文件找不到就回退到index.html。HTML 表白代码这种单页项目其实根本用不到它但保留一个无害且以后如果你想在这个服务器上同时放别的静态页面这样可以避免出现 404 白屏。配好之后执行sudo nginx -t检查语法再sudo systemctl reload nginx重载配置。重启完成后打开手机流量、不使用任何局域网做真机验收。我压箱底的检查清单是4G/5G 网络下打开链接看首屏是否在 2 秒内出现确认没有开着开发者工具的设备仿真就跳到桌面模式点一下按钮确认背景音乐能播把手机旋转横屏再转回来确认爱心没有因为resize事件而跑出画布最后检查分享到微信时有没有带出index.html这类明显的文件后缀。这一点经常被忽略Nginx 配置里如果index index.html写好了访问love.example.com就会直接展示页面如果对方收到的链接带着一串管理后台文件名那在微信浏览器里多半会被非标准格式拦截观感会差很多。把链接发出去之前用自己的手机从裸网址完整走一遍这两个流程这个 HTML 表白代码套餐才算交付完成。本文还有配套的精品资源点击获取
HTML表白代码实战：CSS动画与Canvas粒子特效全解析
简介一份以HTML、CSS和JavaScript编写的表白代码套餐适合想用技术表达心意、同时学习前端基础的程序爱好者。压缩包共21个文件包含12个JS脚本、4个HTML页面、3个CSS样式表另有1个MP3背景音乐和1个PHP后端脚本整体约850KB结构清晰。页面通过标题、段落等标签组织内容用CSS控制配色、字体与心跳动画并借助JavaScript实现点击爱心、动态展示信息等交互效果。已有4329人学习下载。用户只需替换页面中的姓名和恋爱时间即可生成专属表白页面同时还能从中理解DOM操作、事件监听、keyframes动画等知识点是一份兼具浪漫与学习价值的练手资源。1. HTML表白代码套餐先搞清楚这是在帮你解决什么问题把「HTML表白代码套餐」搜出来的人一半是想找个现成页面直接转发出去另一半则更想知道为什么同样是 HTML 网页制作网上那些爱心粒子特效表白 HTML 代码能那么顺滑自己抄下来却白屏、错位、按钮点了没反应。这个标题看着是玩票实际是一类非常典型的模板工程——结构上不过几十个 HTML 标签动效靠的是 CSS 动画在时间轴上不断变换关键帧而粒子效果则依赖 JavaScript 操作 Canvas 逐帧绘制。这套「结构 样式 行为」三层是 Web 前端的骨架只是表白代码把它浓缩在了一个页面里。这篇文章从最小可运行版本讲起把动画参数调参、移动端适配、兼容性排错和上线部署几条路都走一遍适合能看懂代码、但还没系统写过动画和 Canvas 的 IT 从业者。2. 拆解表白页面的三层技术结构、动画与粒子渲染2.1 表白页最常见的是哪三块HTML 标签、CSS 动画和 Canvas打开任意一份能正常运行的 HTML 表白代码你看到的通常不是一条从头写到尾的代码而是三个职责清晰的层。第一层是语义结构负责承载文字、按钮、背景图和音乐播放器第二层是视觉样式负责把普通 div 变成跳动的心形、渐变的天空和上下浮动的光点第三层是交互行为负责处理点击、滚动和入场动画的时间顺序。这里有个很多人会误会的点HTML 标签本身不做任何动画它只提供节点字体变大变小、位置移动、透明度变化全部由 CSS 的transform、opacity和transition完成粒子从中间散开、聚成一个心形则必须靠 JavaScript 去操作 Canvas 上每个粒子的坐标。以我调页面的习惯第一步是把这三层在文件里分开写好别把内联样式满天飞地塞进 HTML 标签里否则后面改一个参数要翻遍整个文件。下表是我在检查各类表白代码模板时习惯列出的分层清单你也可以照着它给自己的页面做体检。技术层常见实现方式负责表现出问题时看的调试面板结构层HTML5 语义标签section、播放器audio、按钮button文案、入口、媒体裸奔时也能读懂页面Elements 面板看节点是否渲染样式层内联style块、CSS 变量、keyframes渐变、心形、缩放、浮动全部视觉变化Styles 面板看动画属性是否生效行为层script里的 Canvas 粒子、事件监听粒子飘散、打字机、倒计时、点击回馈Console 面板看报错Sources 面板断点没有这三层静态页面也能表白但会像一张贴在墙上的海报加上动画之后才更像一个「会呼吸的页面」这是表白代码和普通 HTML 网页制作的最大区别也是你要学它的价值点。2.2 用 CSS 动画做出「正在跳动」的心形我见过不少人对动效的第一反应是去引入体积很大的动画库但在表白这种小页面里最可靠的做法反而是一帧一帧写 CSS。心形跳动本质上只有两个动作整体从 1.0 缩放到 1.1再回到 1.0配合ease-in-out缓动函数就会产生呼吸一样的节奏。这里的关键不是动画本身而是你要明白一件事动画不是由「跳」实现的而是由「跳之间的时间间隔」实现的。.heart { width: 120px; height: 120px; background: #ff4d6d; transform: rotate(45deg); animation: heartbeat 1.2s ease-in-out infinite; } .heart::before, .heart::after { content: ; position: absolute; width: 120px; height: 120px; background: #ff4d6d; border-radius: 50%; } .heart::before { left: -60px; } .heart::after { top: -60px; } keyframes heartbeat { 0% { transform: rotate(45deg) scale(1); } 25% { transform: rotate(45deg) scale(1.1); } 40% { transform: rotate(45deg) scale(0.95); } 60% { transform: rotate(45deg) scale(1.1); } 100% { transform: rotate(45deg) scale(1); } }这段代码先用一个正方形旋转 45 度做主体再用两个伪元素::before和::after画出左右两边的圆三个图形拼起来就是一个标准的心形轮廓。keyframes heartbeat里定义了五个关键帧25% 放大到 1.140% 缩小到 0.9560% 再放大到 1.1这一组「大-小-大」就是心跳的节奏感来源。动画属性1.2s ease-in-out infinite表示单次时长 1.2 秒、缓动为先慢后慢、无限循环。参数说明想调整心跳快慢就改animation里的1.2s改小会急促、改大会像慢动作想调力度就改关键帧里的scale(1.1)。这里不建议把transform: rotate(45deg)写进关键帧外的一个属性再在关键帧里单独写 scale因为transform是一个整体两处写不同内容会导致旋转角度被覆盖掉心形会变形。这是新手最容易踩的坑。2.3 一个直接双击运行的最小爱心粒子表白页面光有跳动的心形还是静态的真正让「套餐」有质感的是满屏飘散的爱心粒子。粒子效果基本都长一个样先做一堆初始坐标随机的小圆点然后用一个循环不断更新坐标和透明度最后用 Canvas 把它们画出来。这个做法和你处理 C 语言表白代码的思路很像——先定义数据再渲染再循环更新只是 C 语言输出到终端Canvas 输出到画布。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title爱心粒子/title style html, body { margin: 0; height: 100%; background: #1a1a2e; overflow: hidden; } canvas { display: block; } /style /head body canvas idcanvas/canvas script const canvas document.getElementById(canvas); const ctx canvas.getContext(2d); let w, h, particles []; const count 120; function resize() { w canvas.width window.innerWidth; h canvas.height window.innerHeight; } class Particle { constructor() { const t Math.random() * Math.PI * 2; const r Math.random() * 2 1.5; this.x w / 2; this.y h / 2; this.t t; this.r r; this.targetX w / 2 16 * Math.pow(Math.sin(t), 3); this.targetY h / 2 - (13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)); } update() { this.x (this.targetX - this.x) * 0.04; this.y (this.targetY - this.y) * 0.04; } draw() { ctx.fillStyle #ff4d6d; ctx.globalAlpha Math.abs(Math.sin(this.t * 10)); ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2); ctx.fill(); } } function init() { particles []; for (let i 0; i count; i) particles.push(new Particle()); } function loop() { ctx.clearRect(0, 0, w, h); particles.forEach(p { p.update(); p.draw(); }); requestAnimationFrame(loop); } window.addEventListener(resize, () { resize(); init(); }); resize(); init(); loop(); /script /body /html把这整段复制成一个.html文件双击用浏览器打开就能看到粒子从中心散开、慢慢聚成一个心形的过程。脚本的逻辑分三条线resize()把画布铺满视口Particle类在构造函数里用参数方程算出每个粒子聚拢后的最终坐标loop()每帧调用requestAnimationFrame让粒子以 0.04 的系数向目标点移动同时用Math.abs(Math.sin(...))做出闪烁效果。参数说明count 120是粒子总数改大会让心形更密但 60fps 以下的低端手机会开始掉帧16 * Math.pow(Math.sin(t), 3)和13 * Math.cos(t) - 5 * Math.cos(2*t)...是心形参数方程决定了粒子的最终排列形状0.04是移动速度改大聚拢快、改小飘得慢我一般保持在 0.02 到 0.06 之间。页面的viewport设置不能删否则在手机上打开会自动缩放到一个小窗口里这也是搜「HTML 表白代码套餐」时出现频率极高的问题。3. 把表白代码改造成自己的配置化、文字、音乐与图片3.1 别改源码把文案和参数抽成一份 JS 配置网上拿到的表白代码模板大多数写得很死表白的话直接写在 HTML 里图片路径是image.jpg音乐地址是作者自己的服务器。你要是硬去源码里一处一处找着改改完第二天想换句话又得重来一趟。我一般拿到模板的第一件事是先把它「配置化」——把会变的东西全部挪到 JavaScript 顶部的一个对象里正文只负责读取。这样下来所谓的表白代码套餐就成了一套能反复套用的模板。window.LOVE_CONFIG { title: 给最特别的人, message: 从遇见你的那天起我的所有页面都开始跳动。, image: ./photo.jpg, music: ./bgm.mp3, startTime: 2024-06-01 20:00:00, showDays: true };这个配置对象放在script最早的位置后面的渲染逻辑只用LOVE_CONFIG取数据。title会写入页面标题和首屏文案message是滚动展示的话image是相册图片的相对路径music是背景音乐startTime可以配合一个倒计时函数在表白页加载时先显示「我们已经相识了 N 天」用这种有具体对象的做法比在网上重新找一个合心意模板来的方便得多。配置对象的另一个好处是可以和 URL 查询参数结合。比如在本机测试时想换文案又不想改文件我经常会直接用浏览器地址栏输入index.html?name某个人然后在脚本里用new URLSearchParams(location.search)去读把它追加到显示文本后面。但注意别把startTime写成2024-06-01 20:00:00这种含空格的格式最好改成 ISO 格式例如2024-06-01T20:00:00否则在 iOS Safari 上new Date()会直接返回 Invalid Date页面上的倒计时瞬间变成 NaN。3.2 打字机效果与图片预加载让文字和图片按顺序进场有了配置对象下一步就是让文案「打字机」式地逐字出现。打字机实现不复杂核心是setInterval每隔固定时间往目标节点追加一个字符直到写完。这里容易踩的坑有两个一是字符串里有 HTML 标签比如span逐字追加时会出现半个标签导致样式错乱二是间距设得太短会让文字闪得快没有情绪。function typeText(el, text, speed 80, onDone) { let i 0; const timer setInterval(() { i; el.innerHTML text.slice(0, i); if (i text.length) { clearInterval(timer); if (onDone) onDone(); } }, speed); }调用方式typeText(document.getElementById(msg), LOVE_CONFIG.message, 100, () { document.querySelector(.btn).classList.add(show); });。参数里speed是每次追加字符的间隔单位毫秒80 到 120 之间人眼读起来都比较舒服onDone是打字结束后的回调适合用来在文字「打」完之后再显示按钮或开始播放音乐形成层次的入场面。写完打字机别忘了给图片做预加载。function preloadImage(src) { return new Promise((resolve, reject) { const img new Image(); img.onload () resolve(img); img.onerror reject; img.src src; }); }这里用Promise包装Image对象加载事件可以在图片加载完成后再执行入场动画避免页面都展示完了图片位置还是一块灰色空白。如果图片很大我建议在配置对象里加imageTimeout: 3000字段配合Promise.race做一个超时回退3 秒加载不出来就显示一张纯色渐变背景不要一直卡在白屏。这个 3 秒的兜底逻辑其实比图片本身更影响对方打开页面时的第一印象。3.3 HTML 表单之外的交互点击按钮触发的收尾动作表白页面通常不是单屏滚到底而是在文字和爱心粒子之后给一个按钮点击后出现最终的一句话或一张合影。这个交互的实现没有太多技术含量但它涉及「按钮可点区域」和「点击事件绑定时机」两个细节。很多模板在页面加载时脚本还没执行完按钮就已经渲染出来了用户快速点击时事件监听还没挂上去看起来就像「按钮坏了」。document.addEventListener(DOMContentLoaded, () { const btn document.getElementById(finalBtn); if (btn) { btn.addEventListener(click, () { document.getElementById(finalMsg).style.opacity 1; btn.disabled true; }); } });把事件绑定放在DOMContentLoaded里确保整个文档 DOM 解析完成后再挂监听这是解决点不动按钮最直接的办法。点击后btn.disabled true是为了防止重复点击触发多次动画许多表白代码模板忽略了这一行导致连续点击时页面动画会被反复重置。如果你把这段代码和前面的配置对象拼在一起实际上就已经做完了一个「带打字机 图片 按钮 背景音乐」的小填空页面剩下的只是把LOVE_CONFIG里的文案换成你要说的内容。4. 常见坑与排错图标显示不出来、页面白屏、移动端错位4.1 白屏和黑屏先分清是哪一层崩了打开表白页面变成白屏这个问题的排查顺序是有讲究的。常见原因按发生频率排列第一是 HTML 文件编码不是 UTF-8 导致乱码第二是外部 CDN 资源加载失败第三是脚本运行到一半抛错停止了后续代码。遇到白屏时我会先看 Console如果有红色报错信息就按报错的第几行去查如果 Console 干净但页面空白就要去 Elements 面板看 body 底下到底有没有节点。导致「HTML 文件无法预览」这个搜索词高频出现的原因大多不是代码本身有错而是双击.html文件时浏览器以file://协议打开JavaScript 读取相对路径资源时会有跨域限制。比如代码里写了fetch(./data.json)或import一个本地 js 模块双击打开必然报错但同一个文件放到http://localhost下就正常。解决这个问题的标准做法是本地起一个静态服务器在文件目录里执行python3 -m http.server 8080没有 Python 用npx serve .也行再访问http://localhost:8080/index.html。如果你平时用的是 Visual Studio Code新建 HTML 文件后可以直接装一个 Live Server 插件右键选 Open with Live Server效果同理由能直接复现「换上服务器就正常」的场景。4.2 手机上爱心跑到屏幕外面去了表白代码移动端错位的重灾区不在 CSS而在「视口没设置」。如果你打开手机浏览器后发现整个页面被缩放成一个小方块或者爱心跑到屏幕外先检查head里有没有这一行meta nameviewport contentwidthdevice-width, initial-scale1.0, user-scalablenowidthdevice-width让布局视口等于设备宽度initial-scale1.0是做初始缩放比例user-scalableno禁止双指缩放。这里要说明user-scalableno对无障碍并不友好但它能避免用户在手机上双击时触发页面自动缩放导致的动画错位这个取舍我在做表白这类 H5 时会选禁止缩放因为核心诉求是保证动画在有限屏幕内完整呈现。除了视口还要检查有没有用window.innerHeight来计算画布高度。在移动端浏览器里地址栏显示和隐藏会实时改变innerHeight我一般会监听resize事件重新设置画布尺寸像第 2 章代码里写的那样并在事件里加上防抖否则用户在手机上上下滑动页面时爱心会因为画布高度频繁变化而不断闪烁。4.3 背景音乐、字体和按钮在手机上的三个坑背景音乐是最容易出状况的部分。iOS 系统的 Safari 不允许页面加载时自动播放带声音的audio必须等用户触屏一次才能播放这和桌面浏览器行为不同。解决方式是在页面第一次点击按钮时通过audio.play()触发一次播放然后在回调里把状态存起来。现象大概率原因排查手段音乐不出声没触发过play()、音频格式不支持检查音频是否 MP3 格式确认代码里有没有用户手势按钮文字显示成方框字体引用的 ttf/otf 格式太大、加载慢改用 woff2 字体格式或者用系统字体栈font-family: sans-serif粒子动画掉帧粒子数量太多、循环里做了大量 DOM 操作调小count检查loop里是否只是 Canvas 绘制没有操作 DOM关于字体很多模板会引入中文字体文件但中文字体动辄几 MB在手机上加载要等很久。我的做法是第一版先不加自定义字体用系统字体跑通最后再决定是否用font-display: swap让文字先显示再切换字体。如果对方打开页面时一半时间都在等字体那再好看的排版也会输给「打不开」三个字。下面这段脚本可以当作「手机环境检测」的兜底逻辑当在 iOS 或 Android 上打开时给 html 加对应 class方便在 CSS 里针对不同系统微调安全区、底部间距等细节。这段代码放着不用也没副作用但需要的时候能省大量调试时间。const ua navigator.userAgent || ; document.documentElement.classList.toggle(is-ios, /iPhone|iPad|iPod/i.test(ua)); document.documentElement.classList.toggle(is-android, /Android/i.test(ua));classList.toggle的第一个参数是类名第二个参数是一个布尔值为真时加上类为假时移除类。利用这个逻辑你可以在 CSS 里写.is-ios .footer { padding-bottom: constant(safe-area-inset-bottom); }让按钮在 iPhone 底部的小横条上方正常显示不至于被遮住一半。这是移动端落地里很琐碎、但对方第一眼就能感受到差异的点。5. 把“套餐”部署到线上Nginx 静态服务配置与验收清单表白页面做完之后最终目的是生成一个链接发给对方。部署方式有很多种最常见也最可控的是把它放到一台云服务器上再用 Nginx 托管静态文件。下面的配置是一个最小可用版本适合单体 HTML 项目。注意如果服务器在国内记得提前做好域名备案和 HTTPS 证书否则分享出去的页面在微信里打开会被拦。sudo apt-get update sudo apt-get install -y nginx sudo cp -r /path/to/love-page /var/www/love/path/to/love-page是你本地代码目录整个服务只需要这个目录能通网即可。部署时要注意把LOVE_CONFIG里的image和music路径改成相对路径并保证大小写和文件名完全一致因为 Linux 的文件系统是区分大小写的这和 Windows 下双击预览完全不一样。server { listen 80; server_name love.example.com; root /var/www/love; index index.html; location / { try_files $uri $uri/ /index.html; } }try_files $uri $uri/ /index.html这行的作用是每个请求先找对应的物理文件找不到就回退到index.html。HTML 表白代码这种单页项目其实根本用不到它但保留一个无害且以后如果你想在这个服务器上同时放别的静态页面这样可以避免出现 404 白屏。配好之后执行sudo nginx -t检查语法再sudo systemctl reload nginx重载配置。重启完成后打开手机流量、不使用任何局域网做真机验收。我压箱底的检查清单是4G/5G 网络下打开链接看首屏是否在 2 秒内出现确认没有开着开发者工具的设备仿真就跳到桌面模式点一下按钮确认背景音乐能播把手机旋转横屏再转回来确认爱心没有因为resize事件而跑出画布最后检查分享到微信时有没有带出index.html这类明显的文件后缀。这一点经常被忽略Nginx 配置里如果index index.html写好了访问love.example.com就会直接展示页面如果对方收到的链接带着一串管理后台文件名那在微信浏览器里多半会被非标准格式拦截观感会差很多。把链接发出去之前用自己的手机从裸网址完整走一遍这两个流程这个 HTML 表白代码套餐才算交付完成。本文还有配套的精品资源点击获取
