简介这是一份面向程序员及前端初学者的浪漫表白页面源码借助 HTML、CSS 与 JavaScript 三种技术组合实现逐行打印文字、随机变色、玫瑰花飘落、夜空背景、烟花动画与背景音乐等特效可用于情人节、520、纪念日或生日等场景帮助希望用创意方式表达心意的人快速搭建一个可运行、可定制的表白页面。压缩包共 8 个文件约 524KB包含 1 个 HTML 入口页、1 个 CSS 样式表、2 个 JavaScript 脚本含烟花特效与 jQuery 依赖、3 张 PNG 图片素材和 1 段 MP3 音效结构精简、开箱即用。目前已有 5716 人学习下载说明其效果与易用性获得一定认可。读者可直接修改文字内容、颜色与字体大小完成个性化定制并参考脚本中的动画与音效调用方式理解前端特效的组织思路适合作为练手小项目或节日礼物二次开发。1. 一个 HTML 文件就能跑的表白页到底能玩出什么花样去年 520 前一周某开发者被朋友拉去救急对方在某个代码托管平台上翻到一个表白页面下载下来双击打开满屏爱心乱飞但文字是英文的背景音乐加载不出来手机上打开还错位。他问我“这玩意儿能不能改”我打开一看就是一个 HTML 文件加一个 CSS 文件加一个 JS 文件没有构建工具没有依赖包浏览器直接打开就能跑。这类“520 程序员前端表白代码”本质上是一个纯静态的浪漫交互页面用 HTML 搭结构、CSS 做视觉、JavaScript 驱动动画和交互适合想给对象做点不一样东西的前端新手也适合拿它当 Canvas 动画和 CSS 动画的练手项目。它不解决业务问题但能把“我写了一段代码给你”这件事变得具体可见。下面按“它是什么 → 怎么跑起来 → 核心代码怎么读 → 怎么改成自己的 → 哪里容易翻车”的顺序拆一遍。2. 项目结构与技术选型三个文件撑起一个页面2.1 目录长什么样这类表白页的资源包通常非常扁平解压后大致是下面这个结构。不同来源的包文件名会有差异但核心构成基本一致love-page/ ├── index.html # 页面入口所有 DOM 结构在这里 ├── css/ │ └── style.css # 布局、配色、字体、CSS 动画 ├── js/ │ └── main.js # 爱心粒子、打字机文字、按钮交互 ├── music/ │ └── bgm.mp3 # 背景音乐部分包不带需要自己补 └── images/ └── photo.jpg # 可选放合照或背景图没有package.json没有node_modules没有 webpack 或 vite 配置。这意味着它不需要npm install也不需要起本地服务器就能预览——直接双击index.html即可。这是它最大的优点也是它最大的限制所有资源路径都必须是相对路径一旦你把文件挪到别的目录层级图片和音乐就可能 404。2.2 技术栈为什么是这三样HTML、CSS、JavaScript 三件套是这类页面的标准配置原因很直接表白页的受众是“打开就能看”的人不是开发者。用框架反而增加部署门槛。具体分工上HTML 负责语义结构标题、段落、按钮、容器CSS 负责视觉表现渐变背景、字体、爱心形状、过渡动画JavaScript 负责动态行为粒子系统、文字逐字出现、点击触发特效、音乐播放控制。值得单独说的是动画实现方式。这类页面里的爱心效果通常有两种做法一种是纯 CSS 动画用keyframes让若干绝对定位的爱心元素上下浮动优点是代码少、性能好缺点是数量一多就不好控制随机性另一种是 Canvas 粒子系统在canvas上绘制大量爱心或圆点用requestAnimationFrame逐帧更新位置优点是能做出“满屏飘爱心”的密度感缺点是需要理解坐标和帧循环。多数资源包会两者混用背景用 CSS 渐变主体爱心用 Canvas。2.3 页面加载的完整链路从打开文件到看到效果链路是这样的浏览器解析index.html遇到link加载style.css遇到script加载main.js。如果脚本放在head里且没有defer它会阻塞 DOM 解析如果放在body末尾则 DOM 已经就绪脚本可以直接操作元素。这类项目常见做法是把脚本放在/body前或者用DOMContentLoaded包一层。音乐文件通常是audio标签加autoplay但现代浏览器普遍禁止无交互自动播放所以实际体验往往是“点了页面才响”这一点后面避坑章节会细说。提示如果你拿到的包里有README或使用说明.txt先看它里面通常会写清楚音乐文件要不要自己替换、图片放哪个目录。3. 跑起来从双击到手机上能看3.1 本地直接打开最省事的方式就是解压后双击index.html。但这里有个前提所有资源引用都是相对路径且没有用到fetch或 ES Module。如果main.js里写了import语句或者用了fetch读取本地 JSON直接双击会因跨域策略失败。判断方法很简单打开浏览器控制台F12看 Console 有没有红色报错。没有报错、页面正常显示就说明可以直接用。如果确实需要本地服务器比如脚本用了模块化写法用 Python 自带的静态服务器最方便不用装任何东西# 在项目根目录执行python3 一般系统自带 python3 -m http.server 8080 # 然后浏览器访问 http://localhost:8080这条命令的含义是在当前目录起一个静态文件服务器监听 8080 端口。-m表示以模块方式运行http.server。如果你的系统只有python没有python3把命令里的python3换成python即可。起服务后访问http://localhost:8080效果和双击一致但模块加载和fetch都能正常工作。3.2 手机上打开的正确姿势很多人改完想在手机上给对象看结果发现排版全乱。原因通常有两个一是index.html的head里缺了 viewport 元标签二是 CSS 里用了固定像素宽度。先检查这一行是否存在meta nameviewport contentwidthdevice-width, initial-scale1.0这行的作用是告诉移动端浏览器页面宽度等于设备宽度初始缩放比例为 1。没有它手机浏览器会按桌面宽度渲染再缩小文字小得看不清。加上之后再把 CSS 里写死的width: 1200px之类改成max-width加百分比基本就能适配。手机预览的传输方式常见做法是在同一局域网下用电脑起服务手机访问电脑的局域网 IP 加端口比如http://192.168.1.10:8080。前提是两台设备连同一个 Wi-Fi且电脑防火墙没有拦截该端口。这一步不需要任何额外工具python3 -m http.server默认监听所有网卡。3.3 部署到静态托管想让对方随时随地打开就得放到公网。这类纯静态页面最适合静态托管把整个文件夹上传入口设为index.html即可。部署前要做一次路径检查——把所有src、href里的绝对路径以/开头改成相对路径否则部署到子目录下会全部 404。另外音乐和图片文件体积要控制手机流量下加载一个 10MB 的 mp3 体验很差常见做法是压到 2MB 以内或者干脆去掉自动播放改成点击按钮触发。4. 核心代码拆解爱心粒子、打字机与交互4.1 Canvas 爱心粒子系统这是整个页面视觉上最“唬人”的部分。核心思路是创建 canvas拿到 2D 上下文维护一个粒子数组每帧清屏、更新每个粒子的位置、重新绘制。下面是一段可直接运行的简化实现// 获取画布并设置尺寸铺满窗口 const canvas document.getElementById(heartCanvas); const ctx canvas.getContext(2d); canvas.width window.innerWidth; canvas.height window.innerHeight; // 粒子数组每个粒子记录位置、速度、大小、透明度 const particles []; const PARTICLE_COUNT 120; // 用参数方程生成爱心轮廓上的点作为粒子初始位置 function heartPoint(t) { // 经典爱心参数方程t 取 0 到 2π 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 initParticles() { for (let i 0; i PARTICLE_COUNT; i) { const t (i / PARTICLE_COUNT) * Math.PI * 2; const p heartPoint(t); particles.push({ x: canvas.width / 2 p.x * 10, // 放大 10 倍并居中 y: canvas.height / 2 p.y * 10, vx: (Math.random() - 0.5) * 0.6, // 水平漂移速度 vy: (Math.random() - 0.5) * 0.6, // 垂直漂移速度 size: Math.random() * 2 1, // 粒子半径 1~3 alpha: Math.random() * 0.5 0.5 // 透明度 0.5~1 }); } } function animate() { // 半透明黑色覆盖形成拖尾效果 ctx.fillStyle rgba(0, 0, 0, 0.08); ctx.fillRect(0, 0, canvas.width, canvas.height); particles.forEach(p { p.x p.vx; p.y p.vy; // 越界后从另一侧回来形成循环 if (p.x 0) p.x canvas.width; if (p.x canvas.width) p.x 0; if (p.y 0) p.y canvas.height; if (p.y canvas.height) p.y 0; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fillStyle rgba(255, 105, 180, ${p.alpha}); ctx.fill(); }); requestAnimationFrame(animate); } initParticles(); animate();逐段说明heartPoint用的是经典爱心参数方程t从 0 到 2π 走一圈就能描出心形轮廓y前面加负号是因为 canvas 的 y 轴向下。initParticles把轮廓点放大 10 倍并平移到画布中心同时给每个粒子一个随机初速度和透明度这样爱心不会死板。animate里先用rgba(0,0,0,0.08)铺一层半透明黑而不是完全清屏这样粒子移动会留下淡淡拖尾视觉上更柔和。requestAnimationFrame让浏览器按刷新率调度比setInterval更省电、更平滑。参数怎么调PARTICLE_COUNT控制密度120 适合桌面手机建议降到 60p.x * 10里的 10 控制爱心大小改大爱心更大但可能超出屏幕vx、vy的系数控制漂移速度调到 0 就是静止爱心。如果想让爱心颜色随位置变化把fillStyle里的固定粉色改成基于p.x计算的色相即可。4.2 打字机文字效果表白页的文字往往不是一次性出现而是逐字“打”出来配合光标闪烁。实现方式是用setTimeout或setInterval按索引逐个追加字符const message 遇见你之后我的代码才有了注释。; const target document.getElementById(typewriter); let index 0; function typeNext() { if (index message.length) { target.textContent message.charAt(index); index; // 每个字符间隔 120ms标点后稍作停顿更自然 const delay /[。]/.test(message.charAt(index - 1)) ? 400 : 120; setTimeout(typeNext, delay); } } // 页面加载完成后延迟 500ms 开始避免和入场动画打架 window.addEventListener(load, () setTimeout(typeNext, 500));这里的关键点是charAt(index)逐字取字符textContent追加而不是innerHTML避免特殊字符被当成标签解析。标点后停顿 400ms 是细节能让节奏更像真人说话。window.addEventListener(load, ...)保证图片等资源加载完再开始否则文字可能先于背景出现观感割裂。如果想加光标在 CSS 里给#typewriter加一个::after伪元素用keyframes做透明度闪烁即可。4.3 按钮交互与音乐控制页面上的“点我”按钮通常承担两个职责触发一个特效比如爱心爆发以及启动背景音乐。音乐这块是翻车重灾区因为浏览器自动播放策略限制audio autoplay在多数移动端和桌面 Chrome 上会被静默拦截。稳妥做法是把播放绑定到用户点击const btn document.getElementById(startBtn); const audio document.getElementById(bgm); btn.addEventListener(click, () { // 用户手势内调用 play() 才不会被拦截 audio.play().catch(err { console.warn(音乐播放失败检查文件路径或格式, err); }); // 同时触发一次爱心爆发具体实现可复用粒子系统 burstHearts(); });play()返回 Promise失败时catch里能拿到原因常见的是文件路径错或格式不被支持。burstHearts是自定义函数思路是在点击位置附近临时生成一批粒子给一个向外的初速度几秒后移除。这样按钮就有了“反馈感”而不是点了没反应。5. 改成自己的文案、配色、素材替换清单5.1 文案和标题改哪里所有可见文字都在index.html里搜索中文就能定位。需要改的通常是三处title标签浏览器标签页标题、页面主标题h1、打字机文案main.js里的message变量。改message时注意字符串里的引号转义如果文案里有单引号外层就用双引号或反引号。文案长度建议控制在 30 字以内太长打字机要打很久对方可能没耐心看完。5.2 配色方案怎么换配色集中在style.css的顶部常见做法是用 CSS 变量统一管理:root { --bg-start: #1a0a1e; /* 背景渐变起始色 */ --bg-end: #3d0f2e; /* 背景渐变结束色 */ --heart-color: #ff69b4; /* 爱心主色 */ --text-color: #ffe4f0; /* 文字颜色 */ }改--heart-color就能换爱心颜色但注意main.js里如果写死了rgba(255,105,180,...)CSS 变量管不到 canvas。要么把颜色也抽成 JS 常量要么接受两处分别改。这是这类小项目常见的“配置分散”问题二次开发时值得先统一。5.3 图片和音乐替换图片替换最简单把新图命名为原文件名覆盖images/下的旧图即可不用改代码。如果尺寸差异大检查 CSS 里对应选择器的object-fit是否为cover否则可能拉伸变形。音乐替换要注意格式mp3 兼容性最好文件名保持和audio src一致。如果原包没有音乐文件自己放一个进去再确认index.html里audio的src路径对得上。注意替换素材后务必在手机和桌面各开一次重点看图片是否变形、音乐是否能点响、文字是否溢出容器。这三项是替换后最容易出问题的地方。6. 避坑与排查五个真实会遇到的坑6.1 双击打开一片空白现象浏览器打开index.html后白屏控制台报Access to script at file://... has been blocked by CORS policy。原因脚本用了 ES Modulescript typemodule或fetch读本地文件file://协议下被跨域策略拦截。解决起本地服务器python3 -m http.server 8080再访问或者把模块化写法改成普通脚本。判断依据就是控制台那行 CORS 报错。6.2 音乐死活不响现象页面正常点按钮也没反应或者桌面能响手机不响。原因一是audio autoplay被浏览器策略拦截二是文件路径大小写不一致Linux 服务器区分大小写Windows 不区分三是 mp3 编码不被某些浏览器支持。解决把播放绑定到点击事件里调play()用catch打印错误路径统一用小写必要时转成标准 mp3。手机端还要确认没有开静音模式。6.3 手机上爱心挤成一团现象桌面正常手机打开粒子全堆在左上角或超出屏幕。原因canvas 尺寸在脚本初始化时取了window.innerWidth但移动端地址栏收起/展开会改变视口高度且没有监听resize。解决在resize事件里重新设置canvas.width/height并重新初始化粒子或者用canvas.getBoundingClientRect()取实际尺寸。另外 CSS 里给 canvas 加display: block消除行内元素底部间隙。6.4 部署后图片和音乐全 404现象本地正常传到静态托管后背景图没了、音乐不响。原因资源路径写成了绝对路径/images/photo.jpg部署在子目录下就找不到或者文件名大小写和引用不一致。解决全部改成相对路径images/photo.jpg或./images/photo.jpg上传前用浏览器开发者工具的 Network 面板看哪些请求 404逐个对照文件名。6.5 动画卡顿、手机发烫现象粒子一多就掉帧手机看几分钟明显发热。原因PARTICLE_COUNT设太大或者每帧都在创建新对象、频繁操作 DOM。解决手机端把粒子数降到 60 以下绘制用arc而不是每帧生成图片避免在animate里读写 DOM必要时用devicePixelRatio限制 canvas 分辨率别盲目乘 2 倍。7. 二次开发把它变成可配置的模板拿到这类代码最值的改造不是再加几个特效而是把散落的配置收拢让它变成一个“改几个变量就能换一套”的模板。我一般会做三件事。第一抽一个config对象放在main.js顶部把文案、颜色、粒子数、打字速度全收进去const CONFIG { message: 遇见你之后我的代码才有了注释。, heartColor: [255, 105, 180], // RGB 数组方便拼 rgba particleCount: window.innerWidth 768 ? 60 : 120, typeSpeed: 120, // 每字间隔毫秒 punctPause: 400 // 标点后停顿毫秒 };这样改文案不用在文件里翻改颜色不用同时动 CSS 和 JS。particleCount直接按屏宽给不同值省掉后面再适配的麻烦。第二把 canvas 的尺寸管理做成响应式函数resize时防抖调用function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; particles.length 0; // 清空后按新尺寸重建 initParticles(); } let resizeTimer; window.addEventListener(resize, () { clearTimeout(resizeTimer); resizeTimer setTimeout(resizeCanvas, 200); // 防抖避免频繁重建 });防抖 200ms 是为了避免手机旋转屏幕时连续触发重建导致闪烁。particles.length 0比重新赋值数组更稳不会丢引用。第三加一个“降级开关”。如果检测到prefers-reduced-motion用户系统设置了减少动态效果就把粒子动画关掉只保留静态爱心和文字。这既是无障碍考虑也能救那些低端机const reduceMotion window.matchMedia((prefers-reduced-motion: reduce)).matches; if (!reduceMotion) { initParticles(); animate(); }验证方法很直接改完CONFIG.message刷新看文字变没变改heartColor看爱心颜色变没变手机横竖屏切换看布局崩不崩最后用 Lighthouse 跑一次看性能分有没有明显下降。这套流程走下来基本能保证交付出去的东西在对方设备上不出洋相。说个血泪教训我最早做这类页面时把文案和颜色散在三个文件里改一次要全局搜索替换漏一处就出现“文字是新的、爱心还是旧颜色”的尴尬。从那以后我每次做静态页都强制先抽配置对象再写逻辑哪怕只有几十行代码。希望帮到你别在 520 前一晚还在满文件找那个写死的粉色值。本文还有配套的精品资源点击获取
简介这是一份面向程序员及前端初学者的浪漫表白页面源码借助 HTML、CSS 与 JavaScript 三种技术组合实现逐行打印文字、随机变色、玫瑰花飘落、夜空背景、烟花动画与背景音乐等特效可用于情人节、520、纪念日或生日等场景帮助希望用创意方式表达心意的人快速搭建一个可运行、可定制的表白页面。压缩包共 8 个文件约 524KB包含 1 个 HTML 入口页、1 个 CSS 样式表、2 个 JavaScript 脚本含烟花特效与 jQuery 依赖、3 张 PNG 图片素材和 1 段 MP3 音效结构精简、开箱即用。目前已有 5716 人学习下载说明其效果与易用性获得一定认可。读者可直接修改文字内容、颜色与字体大小完成个性化定制并参考脚本中的动画与音效调用方式理解前端特效的组织思路适合作为练手小项目或节日礼物二次开发。1. 一个 HTML 文件就能跑的表白页到底能玩出什么花样去年 520 前一周某开发者被朋友拉去救急对方在某个代码托管平台上翻到一个表白页面下载下来双击打开满屏爱心乱飞但文字是英文的背景音乐加载不出来手机上打开还错位。他问我“这玩意儿能不能改”我打开一看就是一个 HTML 文件加一个 CSS 文件加一个 JS 文件没有构建工具没有依赖包浏览器直接打开就能跑。这类“520 程序员前端表白代码”本质上是一个纯静态的浪漫交互页面用 HTML 搭结构、CSS 做视觉、JavaScript 驱动动画和交互适合想给对象做点不一样东西的前端新手也适合拿它当 Canvas 动画和 CSS 动画的练手项目。它不解决业务问题但能把“我写了一段代码给你”这件事变得具体可见。下面按“它是什么 → 怎么跑起来 → 核心代码怎么读 → 怎么改成自己的 → 哪里容易翻车”的顺序拆一遍。2. 项目结构与技术选型三个文件撑起一个页面2.1 目录长什么样这类表白页的资源包通常非常扁平解压后大致是下面这个结构。不同来源的包文件名会有差异但核心构成基本一致love-page/ ├── index.html # 页面入口所有 DOM 结构在这里 ├── css/ │ └── style.css # 布局、配色、字体、CSS 动画 ├── js/ │ └── main.js # 爱心粒子、打字机文字、按钮交互 ├── music/ │ └── bgm.mp3 # 背景音乐部分包不带需要自己补 └── images/ └── photo.jpg # 可选放合照或背景图没有package.json没有node_modules没有 webpack 或 vite 配置。这意味着它不需要npm install也不需要起本地服务器就能预览——直接双击index.html即可。这是它最大的优点也是它最大的限制所有资源路径都必须是相对路径一旦你把文件挪到别的目录层级图片和音乐就可能 404。2.2 技术栈为什么是这三样HTML、CSS、JavaScript 三件套是这类页面的标准配置原因很直接表白页的受众是“打开就能看”的人不是开发者。用框架反而增加部署门槛。具体分工上HTML 负责语义结构标题、段落、按钮、容器CSS 负责视觉表现渐变背景、字体、爱心形状、过渡动画JavaScript 负责动态行为粒子系统、文字逐字出现、点击触发特效、音乐播放控制。值得单独说的是动画实现方式。这类页面里的爱心效果通常有两种做法一种是纯 CSS 动画用keyframes让若干绝对定位的爱心元素上下浮动优点是代码少、性能好缺点是数量一多就不好控制随机性另一种是 Canvas 粒子系统在canvas上绘制大量爱心或圆点用requestAnimationFrame逐帧更新位置优点是能做出“满屏飘爱心”的密度感缺点是需要理解坐标和帧循环。多数资源包会两者混用背景用 CSS 渐变主体爱心用 Canvas。2.3 页面加载的完整链路从打开文件到看到效果链路是这样的浏览器解析index.html遇到link加载style.css遇到script加载main.js。如果脚本放在head里且没有defer它会阻塞 DOM 解析如果放在body末尾则 DOM 已经就绪脚本可以直接操作元素。这类项目常见做法是把脚本放在/body前或者用DOMContentLoaded包一层。音乐文件通常是audio标签加autoplay但现代浏览器普遍禁止无交互自动播放所以实际体验往往是“点了页面才响”这一点后面避坑章节会细说。提示如果你拿到的包里有README或使用说明.txt先看它里面通常会写清楚音乐文件要不要自己替换、图片放哪个目录。3. 跑起来从双击到手机上能看3.1 本地直接打开最省事的方式就是解压后双击index.html。但这里有个前提所有资源引用都是相对路径且没有用到fetch或 ES Module。如果main.js里写了import语句或者用了fetch读取本地 JSON直接双击会因跨域策略失败。判断方法很简单打开浏览器控制台F12看 Console 有没有红色报错。没有报错、页面正常显示就说明可以直接用。如果确实需要本地服务器比如脚本用了模块化写法用 Python 自带的静态服务器最方便不用装任何东西# 在项目根目录执行python3 一般系统自带 python3 -m http.server 8080 # 然后浏览器访问 http://localhost:8080这条命令的含义是在当前目录起一个静态文件服务器监听 8080 端口。-m表示以模块方式运行http.server。如果你的系统只有python没有python3把命令里的python3换成python即可。起服务后访问http://localhost:8080效果和双击一致但模块加载和fetch都能正常工作。3.2 手机上打开的正确姿势很多人改完想在手机上给对象看结果发现排版全乱。原因通常有两个一是index.html的head里缺了 viewport 元标签二是 CSS 里用了固定像素宽度。先检查这一行是否存在meta nameviewport contentwidthdevice-width, initial-scale1.0这行的作用是告诉移动端浏览器页面宽度等于设备宽度初始缩放比例为 1。没有它手机浏览器会按桌面宽度渲染再缩小文字小得看不清。加上之后再把 CSS 里写死的width: 1200px之类改成max-width加百分比基本就能适配。手机预览的传输方式常见做法是在同一局域网下用电脑起服务手机访问电脑的局域网 IP 加端口比如http://192.168.1.10:8080。前提是两台设备连同一个 Wi-Fi且电脑防火墙没有拦截该端口。这一步不需要任何额外工具python3 -m http.server默认监听所有网卡。3.3 部署到静态托管想让对方随时随地打开就得放到公网。这类纯静态页面最适合静态托管把整个文件夹上传入口设为index.html即可。部署前要做一次路径检查——把所有src、href里的绝对路径以/开头改成相对路径否则部署到子目录下会全部 404。另外音乐和图片文件体积要控制手机流量下加载一个 10MB 的 mp3 体验很差常见做法是压到 2MB 以内或者干脆去掉自动播放改成点击按钮触发。4. 核心代码拆解爱心粒子、打字机与交互4.1 Canvas 爱心粒子系统这是整个页面视觉上最“唬人”的部分。核心思路是创建 canvas拿到 2D 上下文维护一个粒子数组每帧清屏、更新每个粒子的位置、重新绘制。下面是一段可直接运行的简化实现// 获取画布并设置尺寸铺满窗口 const canvas document.getElementById(heartCanvas); const ctx canvas.getContext(2d); canvas.width window.innerWidth; canvas.height window.innerHeight; // 粒子数组每个粒子记录位置、速度、大小、透明度 const particles []; const PARTICLE_COUNT 120; // 用参数方程生成爱心轮廓上的点作为粒子初始位置 function heartPoint(t) { // 经典爱心参数方程t 取 0 到 2π 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 initParticles() { for (let i 0; i PARTICLE_COUNT; i) { const t (i / PARTICLE_COUNT) * Math.PI * 2; const p heartPoint(t); particles.push({ x: canvas.width / 2 p.x * 10, // 放大 10 倍并居中 y: canvas.height / 2 p.y * 10, vx: (Math.random() - 0.5) * 0.6, // 水平漂移速度 vy: (Math.random() - 0.5) * 0.6, // 垂直漂移速度 size: Math.random() * 2 1, // 粒子半径 1~3 alpha: Math.random() * 0.5 0.5 // 透明度 0.5~1 }); } } function animate() { // 半透明黑色覆盖形成拖尾效果 ctx.fillStyle rgba(0, 0, 0, 0.08); ctx.fillRect(0, 0, canvas.width, canvas.height); particles.forEach(p { p.x p.vx; p.y p.vy; // 越界后从另一侧回来形成循环 if (p.x 0) p.x canvas.width; if (p.x canvas.width) p.x 0; if (p.y 0) p.y canvas.height; if (p.y canvas.height) p.y 0; ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fillStyle rgba(255, 105, 180, ${p.alpha}); ctx.fill(); }); requestAnimationFrame(animate); } initParticles(); animate();逐段说明heartPoint用的是经典爱心参数方程t从 0 到 2π 走一圈就能描出心形轮廓y前面加负号是因为 canvas 的 y 轴向下。initParticles把轮廓点放大 10 倍并平移到画布中心同时给每个粒子一个随机初速度和透明度这样爱心不会死板。animate里先用rgba(0,0,0,0.08)铺一层半透明黑而不是完全清屏这样粒子移动会留下淡淡拖尾视觉上更柔和。requestAnimationFrame让浏览器按刷新率调度比setInterval更省电、更平滑。参数怎么调PARTICLE_COUNT控制密度120 适合桌面手机建议降到 60p.x * 10里的 10 控制爱心大小改大爱心更大但可能超出屏幕vx、vy的系数控制漂移速度调到 0 就是静止爱心。如果想让爱心颜色随位置变化把fillStyle里的固定粉色改成基于p.x计算的色相即可。4.2 打字机文字效果表白页的文字往往不是一次性出现而是逐字“打”出来配合光标闪烁。实现方式是用setTimeout或setInterval按索引逐个追加字符const message 遇见你之后我的代码才有了注释。; const target document.getElementById(typewriter); let index 0; function typeNext() { if (index message.length) { target.textContent message.charAt(index); index; // 每个字符间隔 120ms标点后稍作停顿更自然 const delay /[。]/.test(message.charAt(index - 1)) ? 400 : 120; setTimeout(typeNext, delay); } } // 页面加载完成后延迟 500ms 开始避免和入场动画打架 window.addEventListener(load, () setTimeout(typeNext, 500));这里的关键点是charAt(index)逐字取字符textContent追加而不是innerHTML避免特殊字符被当成标签解析。标点后停顿 400ms 是细节能让节奏更像真人说话。window.addEventListener(load, ...)保证图片等资源加载完再开始否则文字可能先于背景出现观感割裂。如果想加光标在 CSS 里给#typewriter加一个::after伪元素用keyframes做透明度闪烁即可。4.3 按钮交互与音乐控制页面上的“点我”按钮通常承担两个职责触发一个特效比如爱心爆发以及启动背景音乐。音乐这块是翻车重灾区因为浏览器自动播放策略限制audio autoplay在多数移动端和桌面 Chrome 上会被静默拦截。稳妥做法是把播放绑定到用户点击const btn document.getElementById(startBtn); const audio document.getElementById(bgm); btn.addEventListener(click, () { // 用户手势内调用 play() 才不会被拦截 audio.play().catch(err { console.warn(音乐播放失败检查文件路径或格式, err); }); // 同时触发一次爱心爆发具体实现可复用粒子系统 burstHearts(); });play()返回 Promise失败时catch里能拿到原因常见的是文件路径错或格式不被支持。burstHearts是自定义函数思路是在点击位置附近临时生成一批粒子给一个向外的初速度几秒后移除。这样按钮就有了“反馈感”而不是点了没反应。5. 改成自己的文案、配色、素材替换清单5.1 文案和标题改哪里所有可见文字都在index.html里搜索中文就能定位。需要改的通常是三处title标签浏览器标签页标题、页面主标题h1、打字机文案main.js里的message变量。改message时注意字符串里的引号转义如果文案里有单引号外层就用双引号或反引号。文案长度建议控制在 30 字以内太长打字机要打很久对方可能没耐心看完。5.2 配色方案怎么换配色集中在style.css的顶部常见做法是用 CSS 变量统一管理:root { --bg-start: #1a0a1e; /* 背景渐变起始色 */ --bg-end: #3d0f2e; /* 背景渐变结束色 */ --heart-color: #ff69b4; /* 爱心主色 */ --text-color: #ffe4f0; /* 文字颜色 */ }改--heart-color就能换爱心颜色但注意main.js里如果写死了rgba(255,105,180,...)CSS 变量管不到 canvas。要么把颜色也抽成 JS 常量要么接受两处分别改。这是这类小项目常见的“配置分散”问题二次开发时值得先统一。5.3 图片和音乐替换图片替换最简单把新图命名为原文件名覆盖images/下的旧图即可不用改代码。如果尺寸差异大检查 CSS 里对应选择器的object-fit是否为cover否则可能拉伸变形。音乐替换要注意格式mp3 兼容性最好文件名保持和audio src一致。如果原包没有音乐文件自己放一个进去再确认index.html里audio的src路径对得上。注意替换素材后务必在手机和桌面各开一次重点看图片是否变形、音乐是否能点响、文字是否溢出容器。这三项是替换后最容易出问题的地方。6. 避坑与排查五个真实会遇到的坑6.1 双击打开一片空白现象浏览器打开index.html后白屏控制台报Access to script at file://... has been blocked by CORS policy。原因脚本用了 ES Modulescript typemodule或fetch读本地文件file://协议下被跨域策略拦截。解决起本地服务器python3 -m http.server 8080再访问或者把模块化写法改成普通脚本。判断依据就是控制台那行 CORS 报错。6.2 音乐死活不响现象页面正常点按钮也没反应或者桌面能响手机不响。原因一是audio autoplay被浏览器策略拦截二是文件路径大小写不一致Linux 服务器区分大小写Windows 不区分三是 mp3 编码不被某些浏览器支持。解决把播放绑定到点击事件里调play()用catch打印错误路径统一用小写必要时转成标准 mp3。手机端还要确认没有开静音模式。6.3 手机上爱心挤成一团现象桌面正常手机打开粒子全堆在左上角或超出屏幕。原因canvas 尺寸在脚本初始化时取了window.innerWidth但移动端地址栏收起/展开会改变视口高度且没有监听resize。解决在resize事件里重新设置canvas.width/height并重新初始化粒子或者用canvas.getBoundingClientRect()取实际尺寸。另外 CSS 里给 canvas 加display: block消除行内元素底部间隙。6.4 部署后图片和音乐全 404现象本地正常传到静态托管后背景图没了、音乐不响。原因资源路径写成了绝对路径/images/photo.jpg部署在子目录下就找不到或者文件名大小写和引用不一致。解决全部改成相对路径images/photo.jpg或./images/photo.jpg上传前用浏览器开发者工具的 Network 面板看哪些请求 404逐个对照文件名。6.5 动画卡顿、手机发烫现象粒子一多就掉帧手机看几分钟明显发热。原因PARTICLE_COUNT设太大或者每帧都在创建新对象、频繁操作 DOM。解决手机端把粒子数降到 60 以下绘制用arc而不是每帧生成图片避免在animate里读写 DOM必要时用devicePixelRatio限制 canvas 分辨率别盲目乘 2 倍。7. 二次开发把它变成可配置的模板拿到这类代码最值的改造不是再加几个特效而是把散落的配置收拢让它变成一个“改几个变量就能换一套”的模板。我一般会做三件事。第一抽一个config对象放在main.js顶部把文案、颜色、粒子数、打字速度全收进去const CONFIG { message: 遇见你之后我的代码才有了注释。, heartColor: [255, 105, 180], // RGB 数组方便拼 rgba particleCount: window.innerWidth 768 ? 60 : 120, typeSpeed: 120, // 每字间隔毫秒 punctPause: 400 // 标点后停顿毫秒 };这样改文案不用在文件里翻改颜色不用同时动 CSS 和 JS。particleCount直接按屏宽给不同值省掉后面再适配的麻烦。第二把 canvas 的尺寸管理做成响应式函数resize时防抖调用function resizeCanvas() { canvas.width window.innerWidth; canvas.height window.innerHeight; particles.length 0; // 清空后按新尺寸重建 initParticles(); } let resizeTimer; window.addEventListener(resize, () { clearTimeout(resizeTimer); resizeTimer setTimeout(resizeCanvas, 200); // 防抖避免频繁重建 });防抖 200ms 是为了避免手机旋转屏幕时连续触发重建导致闪烁。particles.length 0比重新赋值数组更稳不会丢引用。第三加一个“降级开关”。如果检测到prefers-reduced-motion用户系统设置了减少动态效果就把粒子动画关掉只保留静态爱心和文字。这既是无障碍考虑也能救那些低端机const reduceMotion window.matchMedia((prefers-reduced-motion: reduce)).matches; if (!reduceMotion) { initParticles(); animate(); }验证方法很直接改完CONFIG.message刷新看文字变没变改heartColor看爱心颜色变没变手机横竖屏切换看布局崩不崩最后用 Lighthouse 跑一次看性能分有没有明显下降。这套流程走下来基本能保证交付出去的东西在对方设备上不出洋相。说个血泪教训我最早做这类页面时把文案和颜色散在三个文件里改一次要全局搜索替换漏一处就出现“文字是新的、爱心还是旧颜色”的尴尬。从那以后我每次做静态页都强制先抽配置对象再写逻辑哪怕只有几十行代码。希望帮到你别在 520 前一晚还在满文件找那个写死的粉色值。本文还有配套的精品资源点击获取
