上周一个朋友临时找我说想给喜欢的人准备一个特别的纪念日礼物。他翻了半天电商平台要么是定制的实体相册等物流来不及要么是网上那种模板化的H5看着总觉得差点意思。我问他预算多少他说预算不多但要求很高——要浪漫、要惊喜、要能放很多照片、还要对方打开时眼睛一亮。后来我用一个晚上拿纯 HTML 和 JavaScript 给他做了一面“爱心照片墙”打开页面的一瞬间他自己先被惊到了上百张照片从屏幕中央缓缓浮现慢慢聚成一个饱满的爱心轮廓每张照片还带着轻微的旋转角度鼠标滑上去会轻轻放大背景是深蓝色的星空和浮动光点。他后来交出去的效果也很好对方看完直接问是不是找人定制的。这篇文章不聊虚的把我实现爱心照片墙的全部思路摊开讲爱心坐标怎么算出来的、照片怎么贴上去才自然、一百多张照片为什么能不卡顿、背景音乐为什么必须等用户点击一下才能播放以及最后的部署分享怎么做。不依赖任何框架、不需要后端、甚至不需要一台多好的电脑浏览器打开就能运行。适合有一点前端基础、或者完全没写过代码但愿意按步骤照抄的朋友。1. 这个项目为什么值得做技术选型与整体思路先说结论爱心照片墙本质上就是一个“照片拼贴动画”核心只有三件事——算出一组爱心形状的坐标把照片放到这些坐标上再加一点入场动画和交互反馈。1.1 为什么坚持用纯 HTML JS不用框架很多人一上来就想用 Vue、React甚至去套小程序或者 App 壳子。但在这个场景下纯 HTML 原生 JavaScript 反而是最优解。原因很直接这面照片墙的生命周期可能只有几个小时。表白、纪念日、毕业晚会对方看完感动完这个页面大概率就躺进收藏夹吃灰了。为了一个一次性使用的页面引入脚手架、打包工具、框架依赖成本完全不成比例。原生 JS 写出来就是三个文件HTML、CSS、JS双击就能跑随便找个静态托管传上去就能分享甚至直接发压缩包给对方都能看。另外这个项目的视觉核心是“大量 DOM 元素的高密度排布”。这种场景用原生 DOM 操作反而最好控制。框架的响应式更新机制在这里用不上还可能因为频繁触发 diff 带来多余的性能开销。我自己在实际开发中碰到过不少案例类似这种“一发入魂”的展示型页面原生写法永远是最稳妥的。1.2 核心流程拆解把整个项目拆成五个环节接下来每一章对应一个环节生成爱心坐标点用数学公式采样得到一组分布在爱心曲线上的坐标。照片卡片布局把照片包装成带旋转、居中的卡片定位到坐标上。入场动画让照片分批从中心位置散开逐步形成爱心。交互细节鼠标悬浮放大、点击飘出小爱心、背景音乐、心跳特效。部署与分享让手机和电脑都能流畅打开。这个顺序也是我建议你的实现顺序。先看到爱心轮廓立起来再优化动画和交互最后处理部署这样每一步都有可见的反馈不容易做着做着就失去耐心。2. 爱心形状背后的数学从笛卡尔公式到屏幕坐标爱心照片墙的视觉骨架是爱心轮廓。如果坐标点算歪了后期照片贴得再好看也是白搭。这一章是整个项目的地基我尽量把原理讲透。2.1 两套经典爱心公式我为什么选参数方程网上常见的爱心公式有两类。一类是极坐标方程r a(1 - sinθ)也就是常说的笛卡尔心形线。它的特点是画出来比较“瘪”横向宽、纵向短而且顶部有个内凹的尖。这个公式适合画线稿、做数学题但如果用来铺方形照片横向轮廓会拉得很开照片之间的空隙容易显得稀疏。另一类是参数方程也是我采用的x 16·sin³(t) y 13·cos(t) − 5·cos(2t) − 2·cos(3t) − cos(4t)其中 t 从 0 到 2π。这个方程画出来的爱心更“胖”更圆润纵向比例接近正方形底部收出一个尖锐的角整体轮廓饱满特别适合铺照片。你可以在脑海里把它理解成sin³(t) 控制横向摆动后面那几个 cos 组合项控制纵向的起伏和底部收拢。参数方程还有个好处通过控制 t 的采样步长可以精确决定生成多少个坐标点。这正好对应照片的数量——想要 100 张照片就等间距采 100 个 t 值。2.2 采样密度和照片数量的配比理论上 t 从 0 到 2π 取多少个点都行但实际照片数量需要控制。我实测的经验是照片数量在 100 到 140 张之间观感最好。少于 80 张爱心轮廓会明显看出“稀疏”尤其是底部尖端和两侧弧度大的位置照片之间容易露出大片背景多于 150 张照片互相遮挡严重边缘轮廓虽然完整但中间叠成了厚厚一摞反而看不清单张照片。照片缩到 180px 到 220px 宽指卡片宽度正方形构图为主这个数量下刚好能形成“密而不挤”的效果。如果你只有二三十张照片也有补救办法把照片放大到 300px 左右并且适当地在爱心内部随机加一些填补空隙的散落照片。效果依然不错只是轮廓的“边界感”会弱一些。下面是采样代码直接用等间距取 t 值的方式生成坐标// 生成爱心轮廓上的坐标点 function generateHeartPoints(count) { const points []; for (let i 0; i count; i) { const t (i / count) * Math.PI * 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); points.push({ x, y }); } return points; }这里有一个容易被忽略的细节t 等间距采样不代表坐标点在曲线上等间距分布。因为参数方程在弧度大的地方变化快点会稀疏一些在弧度平缓的地方变化慢点会密集一些。实际操作中这个不均匀很难用肉眼发现加上照片本身有尺寸、还有随机旋转角度会自然掩盖掉这个问题。所以不需要做复杂的弧长均匀化直接采样就行。2.3 坐标归一化把数学坐标变成屏幕坐标上面算出来的 x、y 范围大概是 -17 到 17 之间是一组“数学模型坐标”。要贴到屏幕上必须经过归一化处理把爱心等比缩放到页面可用区域内并且居中。这一步的关键是缩放比例要同时考虑宽和高取二者中较小的那个否则爱心会被拉伸变形。同时留出边距防止爱心边缘贴到屏幕边界。function normalizePoints(points, width, height, margin 60) { const xs points.map(p p.x); const ys points.map(p p.y); const minX Math.min(...xs); const maxX Math.max(...xs); const minY Math.min(...ys); const maxY Math.max(...ys); const rangeX maxX - minX; const rangeY maxY - minY; const scale Math.min( (width - margin * 2) / rangeX, (height - margin * 2) / rangeY ); return points.map(p ({ x: (p.x - (minX maxX) / 2) * scale width / 2, y: (p.y - (minY maxY) / 2) * scale height / 2 })); }注意一个适配问题手机屏幕通常很长在竖屏状态下爱心需要占据整个屏幕的 60% 到 70% 高度才够震撼。但用上面这个公式scale 取的是宽高限制下较小的比例在竖屏上很可能因为宽度限制导致爱心整体偏小。我的处理方式是把 margin 从固定值改成按屏幕高度动态计算或者干脆在手机端单独降低左侧右侧的可用宽度让爱心尽量往上撑。具体做法是在判断window.innerWidth 768时将可用宽度放大到window.innerWidth * 1.2配合overflow: hidden让爱心从小屏两侧“溢”出去一部分。这样观感上爱心会更大也不影响点击和展示。2.4 给爱心一点立体感旋转与纵深光把照片平铺成爱心感觉还差一口气。我加了两个处理一是让每张照片在坐标点附近做小幅度的随机偏移5px 到 12px让轮廓不那么“死板”二是让照片带一个 -8 度到 8 度之间的随机旋转角度模拟手工贴在纸上的感觉。这两个小细节成本几乎为零但对整体观感的提升非常明显。爱心从“程序生成的图形”变成了“亲手贴出来的相册墙”温度感完全不同。3. 照片墙体布局把坐标变成有温度的画面坐标算好了接下来就是把照片卡片放到对应位置。这一章解决“怎么贴得好看”和“怎么保证遮挡关系自然”这两个问题。3.1 照片的预处理尺寸和压缩照片墙最怕的就是原图直出。现在的手机拍一张照片动辄 5MB 以上一百张原图就是 500MB打开页面卡到怀疑人生。这个坑我替你们踩过所以先说预处理。建议所有照片统一处理成宽度不超过 1080px 的 JPEG 或 WebP质量控制在 0.8 左右。正方形构图优先如果不全是正方形代码里也要用object-fit: cover强制裁切让所有卡片视觉大小统一。如果照片数量多强烈建议压缩到 800px 宽。手机上显示一张 200px 的照片底图给到 800px 已经绰绰有余肉眼根本看不出差别但整体加载体积可以控制在 10MB 以内。3.2 卡片生成与遮挡顺序先贴底部再贴顶部每一张照片在 HTML 里就是一个div内部放一个img然后用绝对定位放到坐标点上。关键技巧在于 DOM 的插入顺序。爱心是“底部尖、顶部圆”的结构视觉上底部的照片会被顶部的照片挡住一部分。如果按数组顺序从上往下插入 DOM底部照片反而可能被后插入的元素压在下面遮挡关系就会错乱。我的做法是把所有坐标点按 y 值从大到小排序也就是从屏幕底部到顶部先插入底部的照片再插入顶部的照片。这样底部照片处于 DOM 流的更前面顶部照片后插入会自然覆盖底部照片的边缘。这是整个布局里最容易被忽略、但对最终视觉效果影响最大的一个排序。function buildPhotoWall(photoUrls, points) { const container document.getElementById(photo-wall); const fragment document.createDocumentFragment(); // 按 y 降序排先放底部再放顶部 const indexed points .map((p, i) ({ ...p, idx: i })) .sort((a, b) b.y - a.y); indexed.forEach(({ x, y, idx }) { const card document.createElement(div); card.className polaroid; const img document.createElement(img); img.src photoUrls[idx % photoUrls.length]; img.alt 回忆照片; card.appendChild(img); // 随机偏移和旋转模拟手感 const ox (Math.random() - 0.5) * 20; const oy (Math.random() - 0.5) * 14; const angle (Math.random() - 0.5) * 16; card.style.left ${x ox}px; card.style.top ${y oy}px; card.style.transform translate(-50%, -50%) rotate(${angle}deg); fragment.appendChild(card); }); container.appendChild(fragment); }为什么用translate(-50%, -50%)配合 left/top因为这样可以让照片的中心点对准坐标位置而不是左上角。这是 DOM 定位里很实用的一个组合。3.3 悬浮反馈与层级管理照片贴好后鼠标悬停要有一个“被拿起来看”的效果。我用的是缩放加回正.polaroid { position: absolute; width: 190px; height: 190px; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s; } .polaroid:hover { transform: translate(-50%, -50%) scale(1.18) rotate(0deg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); position: absolute; z-index: 999; }这里有个细节z-index在transition里设成0s可以让鼠标移入时 z-index 立即变成 999保证被放大的照片一定盖在其他照片上面鼠标移出时又会因为 0s 而立刻回到默认层级不会出现“放大照片被隔壁照片盖住一半”的尴尬。3.4 背景深色星空是最佳衬托照片本身颜色五花八门背景如果用白色或浅色爱心轮廓和背景的对比度不够整体会显得“飘”。我建议用深色渐变背景最稳妥的是深蓝到紫黑的径向渐变再点缀一些静止的星点。星点我直接用 CSS 生成不额外引入图片。用box-shadow多重投影就能模拟出一片星空零成本.star { position: fixed; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 30px 60px 0 #fff, 80px 120px 0 rgba(255, 255, 255, 0.8), 150px 40px 0 rgba(255, 255, 255, 0.6), 220px 180px 0 #fff, 300px 90px 0 rgba(255, 255, 255, 0.7); opacity: 0.7; }如果你嫌这样太麻烦也可以直接用 Canvas 随机画几十个点效果一致。重点是星空必须是静止的不要做飘动动画否则会抢走照片的关注度而且让性能白白浪费。4. 一百多张照片的流畅度问题实战中的性能优化照片墙做出来不难难的是在普通手机上打开也流畅。我第一次做完在电脑上测试一切正常换到一部两年前的手机上测试入场动画直接掉到十几帧滑动页面都有点卡。这一章讲我怎么定位问题、怎么优化。4.1 卡顿根源一次性插入和 top/left 定位两个核心原因第一一次性把一百多个 DOM 节点全部appendChild到页面浏览器需要一次性计算大量布局首次渲染会有明显卡顿。修复方法是分批插入每帧只插入一批节点利用requestAnimationFrame让渲染均匀分布于多帧。第二用left/top做动画会触发浏览器的布局重排。尤其是在入场动画阶段如果每一帧都在改 left/top浏览器就要反复重新计算布局这在移动端是性能杀手。必须改用transform: translate()控制位移因为 transform 只触发合成层操作不会引起重排和重绘。4.2 分批渲染让照片从中心“长”出来入场动画我用的是“散开”效果所有照片从屏幕中心的一小团向外扩散到爱心坐标位置。实现思路是给每张照片一个动画延迟让它们按照距离中心的远近依次散开而不是全部同时运动。这里有一个更稳妥的做法与其一百多张照片同时动不如分批“浮现”。首屏先渲染中央的少量照片然后接下来几百毫秒内陆续插入其余照片。这样既保证了动态效果又把单帧压力降到最低。function renderBatch(container, elements, batchSize 20, delay 16) { return new Promise(resolve { let index 0; function nextBatch() { const fragment document.createDocumentFragment(); for (let i index; i Math.min(index batchSize, elements.length); i) { fragment.appendChild(elements[i]); } container.appendChild(fragment); index batchSize; if (index elements.length) { requestAnimationFrame(nextBatch); } else { resolve(); } } requestAnimationFrame(nextBatch); }); }配合will-change: transform告诉浏览器这些元素会频繁动提前放入合成层。但注意不要对全部元素都加只对入场动画前出现的那一批加等动画结束后移除该属性。一百多个元素全部常驻合成层内存占用反而会增大。4.3 入场动画的进度反馈既然要分批渲染不如顺便做一个“加载进度”的仪式感。我在页面中央加了一个百分比数字每渲染完一批就更新一次从 0% 走到 100%最后百分比消失、爱心完整浮现。这个设计有一个额外的好处给观看者一个心理预期也掩盖了照片加载的耗时。你可以把它理解成“拆礼物之前还要撕开包装纸”反而加强了惊喜感。4.4 图片加载策略解码比网络更值得关注很多人在手机上卡的原因不是网络慢而是浏览器一次性解码太多大图。我测试下来发现连续加载 120 张 1MB 的图片时移动端浏览器会明显降速甚至出现白屏。对策是双管齐下要么把图片压到足够小这是最根本的要么用懒加载——滚动到哪张加载哪张。但因为照片是绝对定位铺满全屏的懒加载比较难写我建议还是把力气花在压缩上。120 张 800px 宽的 0.8 质量 JPEG总大小通常不会超过 10MB手机上完全够用。实测数据对比可以参考这张表方案照片数量总大小移动端首屏加载出现掉帧情况原图直出120400MB超过 30 秒严重卡顿压缩至 1080px12038MB5 到 8 秒偶发掉帧压缩至 800px 分批渲染12012MB2 到 4 秒基本流畅5. 表白时刻的交互设计解锁、心跳、音乐照片墙本身只是静态展示真正让它“活起来”的是交互细节。这一章我会把几个让浪漫感翻倍的交互全部拆开讲。5.1 第一屏遮罩、文案与解锁按钮直接打开页面就出现照片缺少仪式感。我建议加一个全屏遮罩层上面放一句话“点击屏幕开启我们的回忆。”这句话可以根据你的场景自由替换。用户点击后遮罩层淡出照片墙开始包装。为什么必须放在遮罩层上做这个点击一方面是为了仪式感另一方面也顺带解决了背景音乐的自动播放限制——浏览器不允许页面没有用户交互就自动播放声音用户点击遮罩层这个动作正好可以作为启动音乐的条件。这个遮罩层我建议保留至少 1.5 秒太短了用户还没看清文案就消失了反而不利于情绪酝酿。5.2 心跳特效用 CSS 动画撑起氛围照片墙淡入之后我加了一个“心跳”效果整个爱心照片墙的容器有节奏地轻微缩放模拟心跳的感觉。实现极其简单一个 CSS 动画搞定keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.05); } 28% { transform: scale(1); } 42% { transform: scale(1.03); } 70% { transform: scale(1); } 100% { transform: scale(1); } } .heartbeat { animation: heartbeat 1.6s ease-in-out infinite; }注意这个动画的缩放幅度不要超过 1.05否则照片文字会被明显拉伸显得廉价。另外动画作用在外层容器而不是每一张照片上保证所有卡片同步跳动才像“一颗心在跳”。5.3 点击屏幕飘出小爱心成本最低的彩蛋我加了一个交互点击页面的任何空白位置鼠标或手指落点处会飘出一个逐渐放大、向上飘散的小爱心。代码量很小但每次点击都有反馈互动感立刻不一样。原理是利用绝对定位动态插入一个爱心字符触发 CSS 动画后监听动画结束事件移除节点。这里注意控制频率如果用户快速连点需要做一下节流否则一瞬间插入几十个节点也会掉帧。let lastBurstTime 0; document.addEventListener(click, (e) { const now Date.now(); if (now - lastBurstTime 150) return; lastBurstTime now; const heart document.createElement(div); heart.className float-heart; heart.textContent ♡; heart.style.left ${e.clientX}px; heart.style.top ${e.clientY}px; document.body.appendChild(heart); heart.addEventListener(animationend, () heart.remove()); });5.4 背景音乐的正确打开方式背景音乐是整个项目里最容易翻车的地方。我第一次做的时候直接用了audio autoplay结果打开页面什么声音都没有——现代浏览器的自动播放策略早就禁掉了这种写法。正确做法是在用户第一次点击遮罩层的时候手动调用audio.play()。如果音乐尚未加载完成play()返回的是一个 Promise需要捕获异常并做一次“加载完成后立即播放”的处理let backgroundMusic document.getElementById(bg-music); let started false; function startMusic() { if (started) return; started true; backgroundMusic.volume 0.4; const playPromise backgroundMusic.play(); if (playPromise playPromise.catch) { playPromise.catch(() { backgroundMusic.addEventListener(canplaythrough, () backgroundMusic.play(), { once: true }); }); } }音乐选型上建议选无歌词的轻音乐音量控制在 0.3 到 0.5并且时长不要太长1 到 2 分钟循环即可。有歌词的歌容易把观看者的注意力拉走反而是无声的旋律更有情绪张力。6. 把作品送到对方手上本地预览与分享发布的细节代码写完只是第一步怎么让对方方便地打开直接影响最终效果。这一章讲我实际用过的几种方案从简单到复杂排列。6.1 最快方案本地直接打开如果你们就在同一台电脑前或者你能拿到对方的电脑最简单的方式就是直接把 HTML 文件发给对方双击打开就能运行。但这里有个坑如果页面里有外部引用的 JS 文件、CSS 文件或者图片浏览器对本地文件有跨域限制fetch和部分加载方式会失败。我在这个小项目里为了避免这种问题直接把 CSS 和 JS 全部内联到 HTML 里图片全部转成 Base64 内嵌。这样单个 HTML 文件就能独立运行双击就出效果发给谁都能看完全不需要服务器。缺点就是文件体积会变大所以图片压缩更要做好。6.2 局域网分享适合现场放映场景如果是在聚会、活动现场用大屏展示局域网分享是最稳的方案。在电脑上开启一个简单的静态服务器手机或平板连同一个 Wi-Fi就能访问页面。不依赖复杂环境最简单的方式是cd 项目目录 python3 -m http.server 8080然后局域网内其他设备通过电脑的局域网 IP 访问http://电脑IP:8080即可。这个方案的好处是图片不用转 Base64加载速度很快适合用投影仪或大屏电视播放。6.3 公网访问做成一个随时能打开的链接如果希望对方无论在哪里打开都能看到就需要把页面放到静态托管服务上。HTML、CSS、JS 这种纯静态页面随便找一个支持静态托管的平台都能搞定免费额度足够个人项目用。上传压缩包解压到网站根目录就能获得一个公网链接。记得把链接生成二维码方便手机扫码打开比复制粘帖长链接要浪漫得多。6.4 手机浏览器的兼容性处理我测试了主流的手机浏览器需要留意这几个点一是100vh在手机浏览器上不等于真实可视区域高度因为地址栏和工具栏会占用空间。强烈建议用window.innerHeight在 JS 里动态设置容器高度。二是在 iOS 上transform: rotate()与will-change同时使用的兼容性最好但不要给太多元素常驻will-change。三是音频文件用 MP3 格式兼容最稳其他格式在部分浏览器上可能不播。还有一个经常被忽略的问题如果对方手机开启了省电模式低端机型上动画会被人为降频卡顿感会格外明显。我目前没有特别完美的解决办法只能建议入场动画控制在 3 秒内完成不要设计 5 秒以上的长动画。最后再分享一个小技巧我第一次帮朋友做这个爱心照片墙的时候把所有照片原图直接塞进去50 张图加起来将近 200MB现场加载了十几秒气氛直接凝固。后来改成统一压缩到 800px 宽、质量 0.8整体 120 张照片压到 12MB打开就是秒出效果。做这种东西讲究的是“对方打开那一瞬间”的情绪加载进度条多一秒都是扣分项所以宁可多花二十分钟压缩照片也别让原图拖后腿。如果你打算真的用它去表白或者准备纪念日惊喜我建议你提前至少一天做好全部照片和文案然后在自己的手机上模拟打开一遍。不要等到当天晚上才传照片相信我当天晚上一定会出各种小状况。预演一遍之后你会发现这面爱心照片墙真的比自己说一百句漂亮话有用。 
长河君 · 2026/10/17 2:14:27 · 阅读 1.2k 用纯HTML和JavaScript打造浪漫爱心照片墙
上周一个朋友临时找我说想给喜欢的人准备一个特别的纪念日礼物。他翻了半天电商平台要么是定制的实体相册等物流来不及要么是网上那种模板化的H5看着总觉得差点意思。我问他预算多少他说预算不多但要求很高——要浪漫、要惊喜、要能放很多照片、还要对方打开时眼睛一亮。后来我用一个晚上拿纯 HTML 和 JavaScript 给他做了一面“爱心照片墙”打开页面的一瞬间他自己先被惊到了上百张照片从屏幕中央缓缓浮现慢慢聚成一个饱满的爱心轮廓每张照片还带着轻微的旋转角度鼠标滑上去会轻轻放大背景是深蓝色的星空和浮动光点。他后来交出去的效果也很好对方看完直接问是不是找人定制的。这篇文章不聊虚的把我实现爱心照片墙的全部思路摊开讲爱心坐标怎么算出来的、照片怎么贴上去才自然、一百多张照片为什么能不卡顿、背景音乐为什么必须等用户点击一下才能播放以及最后的部署分享怎么做。不依赖任何框架、不需要后端、甚至不需要一台多好的电脑浏览器打开就能运行。适合有一点前端基础、或者完全没写过代码但愿意按步骤照抄的朋友。1. 这个项目为什么值得做技术选型与整体思路先说结论爱心照片墙本质上就是一个“照片拼贴动画”核心只有三件事——算出一组爱心形状的坐标把照片放到这些坐标上再加一点入场动画和交互反馈。1.1 为什么坚持用纯 HTML JS不用框架很多人一上来就想用 Vue、React甚至去套小程序或者 App 壳子。但在这个场景下纯 HTML 原生 JavaScript 反而是最优解。原因很直接这面照片墙的生命周期可能只有几个小时。表白、纪念日、毕业晚会对方看完感动完这个页面大概率就躺进收藏夹吃灰了。为了一个一次性使用的页面引入脚手架、打包工具、框架依赖成本完全不成比例。原生 JS 写出来就是三个文件HTML、CSS、JS双击就能跑随便找个静态托管传上去就能分享甚至直接发压缩包给对方都能看。另外这个项目的视觉核心是“大量 DOM 元素的高密度排布”。这种场景用原生 DOM 操作反而最好控制。框架的响应式更新机制在这里用不上还可能因为频繁触发 diff 带来多余的性能开销。我自己在实际开发中碰到过不少案例类似这种“一发入魂”的展示型页面原生写法永远是最稳妥的。1.2 核心流程拆解把整个项目拆成五个环节接下来每一章对应一个环节生成爱心坐标点用数学公式采样得到一组分布在爱心曲线上的坐标。照片卡片布局把照片包装成带旋转、居中的卡片定位到坐标上。入场动画让照片分批从中心位置散开逐步形成爱心。交互细节鼠标悬浮放大、点击飘出小爱心、背景音乐、心跳特效。部署与分享让手机和电脑都能流畅打开。这个顺序也是我建议你的实现顺序。先看到爱心轮廓立起来再优化动画和交互最后处理部署这样每一步都有可见的反馈不容易做着做着就失去耐心。2. 爱心形状背后的数学从笛卡尔公式到屏幕坐标爱心照片墙的视觉骨架是爱心轮廓。如果坐标点算歪了后期照片贴得再好看也是白搭。这一章是整个项目的地基我尽量把原理讲透。2.1 两套经典爱心公式我为什么选参数方程网上常见的爱心公式有两类。一类是极坐标方程r a(1 - sinθ)也就是常说的笛卡尔心形线。它的特点是画出来比较“瘪”横向宽、纵向短而且顶部有个内凹的尖。这个公式适合画线稿、做数学题但如果用来铺方形照片横向轮廓会拉得很开照片之间的空隙容易显得稀疏。另一类是参数方程也是我采用的x 16·sin³(t) y 13·cos(t) − 5·cos(2t) − 2·cos(3t) − cos(4t)其中 t 从 0 到 2π。这个方程画出来的爱心更“胖”更圆润纵向比例接近正方形底部收出一个尖锐的角整体轮廓饱满特别适合铺照片。你可以在脑海里把它理解成sin³(t) 控制横向摆动后面那几个 cos 组合项控制纵向的起伏和底部收拢。参数方程还有个好处通过控制 t 的采样步长可以精确决定生成多少个坐标点。这正好对应照片的数量——想要 100 张照片就等间距采 100 个 t 值。2.2 采样密度和照片数量的配比理论上 t 从 0 到 2π 取多少个点都行但实际照片数量需要控制。我实测的经验是照片数量在 100 到 140 张之间观感最好。少于 80 张爱心轮廓会明显看出“稀疏”尤其是底部尖端和两侧弧度大的位置照片之间容易露出大片背景多于 150 张照片互相遮挡严重边缘轮廓虽然完整但中间叠成了厚厚一摞反而看不清单张照片。照片缩到 180px 到 220px 宽指卡片宽度正方形构图为主这个数量下刚好能形成“密而不挤”的效果。如果你只有二三十张照片也有补救办法把照片放大到 300px 左右并且适当地在爱心内部随机加一些填补空隙的散落照片。效果依然不错只是轮廓的“边界感”会弱一些。下面是采样代码直接用等间距取 t 值的方式生成坐标// 生成爱心轮廓上的坐标点 function generateHeartPoints(count) { const points []; for (let i 0; i count; i) { const t (i / count) * Math.PI * 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); points.push({ x, y }); } return points; }这里有一个容易被忽略的细节t 等间距采样不代表坐标点在曲线上等间距分布。因为参数方程在弧度大的地方变化快点会稀疏一些在弧度平缓的地方变化慢点会密集一些。实际操作中这个不均匀很难用肉眼发现加上照片本身有尺寸、还有随机旋转角度会自然掩盖掉这个问题。所以不需要做复杂的弧长均匀化直接采样就行。2.3 坐标归一化把数学坐标变成屏幕坐标上面算出来的 x、y 范围大概是 -17 到 17 之间是一组“数学模型坐标”。要贴到屏幕上必须经过归一化处理把爱心等比缩放到页面可用区域内并且居中。这一步的关键是缩放比例要同时考虑宽和高取二者中较小的那个否则爱心会被拉伸变形。同时留出边距防止爱心边缘贴到屏幕边界。function normalizePoints(points, width, height, margin 60) { const xs points.map(p p.x); const ys points.map(p p.y); const minX Math.min(...xs); const maxX Math.max(...xs); const minY Math.min(...ys); const maxY Math.max(...ys); const rangeX maxX - minX; const rangeY maxY - minY; const scale Math.min( (width - margin * 2) / rangeX, (height - margin * 2) / rangeY ); return points.map(p ({ x: (p.x - (minX maxX) / 2) * scale width / 2, y: (p.y - (minY maxY) / 2) * scale height / 2 })); }注意一个适配问题手机屏幕通常很长在竖屏状态下爱心需要占据整个屏幕的 60% 到 70% 高度才够震撼。但用上面这个公式scale 取的是宽高限制下较小的比例在竖屏上很可能因为宽度限制导致爱心整体偏小。我的处理方式是把 margin 从固定值改成按屏幕高度动态计算或者干脆在手机端单独降低左侧右侧的可用宽度让爱心尽量往上撑。具体做法是在判断window.innerWidth 768时将可用宽度放大到window.innerWidth * 1.2配合overflow: hidden让爱心从小屏两侧“溢”出去一部分。这样观感上爱心会更大也不影响点击和展示。2.4 给爱心一点立体感旋转与纵深光把照片平铺成爱心感觉还差一口气。我加了两个处理一是让每张照片在坐标点附近做小幅度的随机偏移5px 到 12px让轮廓不那么“死板”二是让照片带一个 -8 度到 8 度之间的随机旋转角度模拟手工贴在纸上的感觉。这两个小细节成本几乎为零但对整体观感的提升非常明显。爱心从“程序生成的图形”变成了“亲手贴出来的相册墙”温度感完全不同。3. 照片墙体布局把坐标变成有温度的画面坐标算好了接下来就是把照片卡片放到对应位置。这一章解决“怎么贴得好看”和“怎么保证遮挡关系自然”这两个问题。3.1 照片的预处理尺寸和压缩照片墙最怕的就是原图直出。现在的手机拍一张照片动辄 5MB 以上一百张原图就是 500MB打开页面卡到怀疑人生。这个坑我替你们踩过所以先说预处理。建议所有照片统一处理成宽度不超过 1080px 的 JPEG 或 WebP质量控制在 0.8 左右。正方形构图优先如果不全是正方形代码里也要用object-fit: cover强制裁切让所有卡片视觉大小统一。如果照片数量多强烈建议压缩到 800px 宽。手机上显示一张 200px 的照片底图给到 800px 已经绰绰有余肉眼根本看不出差别但整体加载体积可以控制在 10MB 以内。3.2 卡片生成与遮挡顺序先贴底部再贴顶部每一张照片在 HTML 里就是一个div内部放一个img然后用绝对定位放到坐标点上。关键技巧在于 DOM 的插入顺序。爱心是“底部尖、顶部圆”的结构视觉上底部的照片会被顶部的照片挡住一部分。如果按数组顺序从上往下插入 DOM底部照片反而可能被后插入的元素压在下面遮挡关系就会错乱。我的做法是把所有坐标点按 y 值从大到小排序也就是从屏幕底部到顶部先插入底部的照片再插入顶部的照片。这样底部照片处于 DOM 流的更前面顶部照片后插入会自然覆盖底部照片的边缘。这是整个布局里最容易被忽略、但对最终视觉效果影响最大的一个排序。function buildPhotoWall(photoUrls, points) { const container document.getElementById(photo-wall); const fragment document.createDocumentFragment(); // 按 y 降序排先放底部再放顶部 const indexed points .map((p, i) ({ ...p, idx: i })) .sort((a, b) b.y - a.y); indexed.forEach(({ x, y, idx }) { const card document.createElement(div); card.className polaroid; const img document.createElement(img); img.src photoUrls[idx % photoUrls.length]; img.alt 回忆照片; card.appendChild(img); // 随机偏移和旋转模拟手感 const ox (Math.random() - 0.5) * 20; const oy (Math.random() - 0.5) * 14; const angle (Math.random() - 0.5) * 16; card.style.left ${x ox}px; card.style.top ${y oy}px; card.style.transform translate(-50%, -50%) rotate(${angle}deg); fragment.appendChild(card); }); container.appendChild(fragment); }为什么用translate(-50%, -50%)配合 left/top因为这样可以让照片的中心点对准坐标位置而不是左上角。这是 DOM 定位里很实用的一个组合。3.3 悬浮反馈与层级管理照片贴好后鼠标悬停要有一个“被拿起来看”的效果。我用的是缩放加回正.polaroid { position: absolute; width: 190px; height: 190px; border-radius: 6px; overflow: hidden; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease, z-index 0s; } .polaroid:hover { transform: translate(-50%, -50%) scale(1.18) rotate(0deg); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5); position: absolute; z-index: 999; }这里有个细节z-index在transition里设成0s可以让鼠标移入时 z-index 立即变成 999保证被放大的照片一定盖在其他照片上面鼠标移出时又会因为 0s 而立刻回到默认层级不会出现“放大照片被隔壁照片盖住一半”的尴尬。3.4 背景深色星空是最佳衬托照片本身颜色五花八门背景如果用白色或浅色爱心轮廓和背景的对比度不够整体会显得“飘”。我建议用深色渐变背景最稳妥的是深蓝到紫黑的径向渐变再点缀一些静止的星点。星点我直接用 CSS 生成不额外引入图片。用box-shadow多重投影就能模拟出一片星空零成本.star { position: fixed; width: 2px; height: 2px; border-radius: 50%; background: #fff; box-shadow: 30px 60px 0 #fff, 80px 120px 0 rgba(255, 255, 255, 0.8), 150px 40px 0 rgba(255, 255, 255, 0.6), 220px 180px 0 #fff, 300px 90px 0 rgba(255, 255, 255, 0.7); opacity: 0.7; }如果你嫌这样太麻烦也可以直接用 Canvas 随机画几十个点效果一致。重点是星空必须是静止的不要做飘动动画否则会抢走照片的关注度而且让性能白白浪费。4. 一百多张照片的流畅度问题实战中的性能优化照片墙做出来不难难的是在普通手机上打开也流畅。我第一次做完在电脑上测试一切正常换到一部两年前的手机上测试入场动画直接掉到十几帧滑动页面都有点卡。这一章讲我怎么定位问题、怎么优化。4.1 卡顿根源一次性插入和 top/left 定位两个核心原因第一一次性把一百多个 DOM 节点全部appendChild到页面浏览器需要一次性计算大量布局首次渲染会有明显卡顿。修复方法是分批插入每帧只插入一批节点利用requestAnimationFrame让渲染均匀分布于多帧。第二用left/top做动画会触发浏览器的布局重排。尤其是在入场动画阶段如果每一帧都在改 left/top浏览器就要反复重新计算布局这在移动端是性能杀手。必须改用transform: translate()控制位移因为 transform 只触发合成层操作不会引起重排和重绘。4.2 分批渲染让照片从中心“长”出来入场动画我用的是“散开”效果所有照片从屏幕中心的一小团向外扩散到爱心坐标位置。实现思路是给每张照片一个动画延迟让它们按照距离中心的远近依次散开而不是全部同时运动。这里有一个更稳妥的做法与其一百多张照片同时动不如分批“浮现”。首屏先渲染中央的少量照片然后接下来几百毫秒内陆续插入其余照片。这样既保证了动态效果又把单帧压力降到最低。function renderBatch(container, elements, batchSize 20, delay 16) { return new Promise(resolve { let index 0; function nextBatch() { const fragment document.createDocumentFragment(); for (let i index; i Math.min(index batchSize, elements.length); i) { fragment.appendChild(elements[i]); } container.appendChild(fragment); index batchSize; if (index elements.length) { requestAnimationFrame(nextBatch); } else { resolve(); } } requestAnimationFrame(nextBatch); }); }配合will-change: transform告诉浏览器这些元素会频繁动提前放入合成层。但注意不要对全部元素都加只对入场动画前出现的那一批加等动画结束后移除该属性。一百多个元素全部常驻合成层内存占用反而会增大。4.3 入场动画的进度反馈既然要分批渲染不如顺便做一个“加载进度”的仪式感。我在页面中央加了一个百分比数字每渲染完一批就更新一次从 0% 走到 100%最后百分比消失、爱心完整浮现。这个设计有一个额外的好处给观看者一个心理预期也掩盖了照片加载的耗时。你可以把它理解成“拆礼物之前还要撕开包装纸”反而加强了惊喜感。4.4 图片加载策略解码比网络更值得关注很多人在手机上卡的原因不是网络慢而是浏览器一次性解码太多大图。我测试下来发现连续加载 120 张 1MB 的图片时移动端浏览器会明显降速甚至出现白屏。对策是双管齐下要么把图片压到足够小这是最根本的要么用懒加载——滚动到哪张加载哪张。但因为照片是绝对定位铺满全屏的懒加载比较难写我建议还是把力气花在压缩上。120 张 800px 宽的 0.8 质量 JPEG总大小通常不会超过 10MB手机上完全够用。实测数据对比可以参考这张表方案照片数量总大小移动端首屏加载出现掉帧情况原图直出120400MB超过 30 秒严重卡顿压缩至 1080px12038MB5 到 8 秒偶发掉帧压缩至 800px 分批渲染12012MB2 到 4 秒基本流畅5. 表白时刻的交互设计解锁、心跳、音乐照片墙本身只是静态展示真正让它“活起来”的是交互细节。这一章我会把几个让浪漫感翻倍的交互全部拆开讲。5.1 第一屏遮罩、文案与解锁按钮直接打开页面就出现照片缺少仪式感。我建议加一个全屏遮罩层上面放一句话“点击屏幕开启我们的回忆。”这句话可以根据你的场景自由替换。用户点击后遮罩层淡出照片墙开始包装。为什么必须放在遮罩层上做这个点击一方面是为了仪式感另一方面也顺带解决了背景音乐的自动播放限制——浏览器不允许页面没有用户交互就自动播放声音用户点击遮罩层这个动作正好可以作为启动音乐的条件。这个遮罩层我建议保留至少 1.5 秒太短了用户还没看清文案就消失了反而不利于情绪酝酿。5.2 心跳特效用 CSS 动画撑起氛围照片墙淡入之后我加了一个“心跳”效果整个爱心照片墙的容器有节奏地轻微缩放模拟心跳的感觉。实现极其简单一个 CSS 动画搞定keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.05); } 28% { transform: scale(1); } 42% { transform: scale(1.03); } 70% { transform: scale(1); } 100% { transform: scale(1); } } .heartbeat { animation: heartbeat 1.6s ease-in-out infinite; }注意这个动画的缩放幅度不要超过 1.05否则照片文字会被明显拉伸显得廉价。另外动画作用在外层容器而不是每一张照片上保证所有卡片同步跳动才像“一颗心在跳”。5.3 点击屏幕飘出小爱心成本最低的彩蛋我加了一个交互点击页面的任何空白位置鼠标或手指落点处会飘出一个逐渐放大、向上飘散的小爱心。代码量很小但每次点击都有反馈互动感立刻不一样。原理是利用绝对定位动态插入一个爱心字符触发 CSS 动画后监听动画结束事件移除节点。这里注意控制频率如果用户快速连点需要做一下节流否则一瞬间插入几十个节点也会掉帧。let lastBurstTime 0; document.addEventListener(click, (e) { const now Date.now(); if (now - lastBurstTime 150) return; lastBurstTime now; const heart document.createElement(div); heart.className float-heart; heart.textContent ♡; heart.style.left ${e.clientX}px; heart.style.top ${e.clientY}px; document.body.appendChild(heart); heart.addEventListener(animationend, () heart.remove()); });5.4 背景音乐的正确打开方式背景音乐是整个项目里最容易翻车的地方。我第一次做的时候直接用了audio autoplay结果打开页面什么声音都没有——现代浏览器的自动播放策略早就禁掉了这种写法。正确做法是在用户第一次点击遮罩层的时候手动调用audio.play()。如果音乐尚未加载完成play()返回的是一个 Promise需要捕获异常并做一次“加载完成后立即播放”的处理let backgroundMusic document.getElementById(bg-music); let started false; function startMusic() { if (started) return; started true; backgroundMusic.volume 0.4; const playPromise backgroundMusic.play(); if (playPromise playPromise.catch) { playPromise.catch(() { backgroundMusic.addEventListener(canplaythrough, () backgroundMusic.play(), { once: true }); }); } }音乐选型上建议选无歌词的轻音乐音量控制在 0.3 到 0.5并且时长不要太长1 到 2 分钟循环即可。有歌词的歌容易把观看者的注意力拉走反而是无声的旋律更有情绪张力。6. 把作品送到对方手上本地预览与分享发布的细节代码写完只是第一步怎么让对方方便地打开直接影响最终效果。这一章讲我实际用过的几种方案从简单到复杂排列。6.1 最快方案本地直接打开如果你们就在同一台电脑前或者你能拿到对方的电脑最简单的方式就是直接把 HTML 文件发给对方双击打开就能运行。但这里有个坑如果页面里有外部引用的 JS 文件、CSS 文件或者图片浏览器对本地文件有跨域限制fetch和部分加载方式会失败。我在这个小项目里为了避免这种问题直接把 CSS 和 JS 全部内联到 HTML 里图片全部转成 Base64 内嵌。这样单个 HTML 文件就能独立运行双击就出效果发给谁都能看完全不需要服务器。缺点就是文件体积会变大所以图片压缩更要做好。6.2 局域网分享适合现场放映场景如果是在聚会、活动现场用大屏展示局域网分享是最稳的方案。在电脑上开启一个简单的静态服务器手机或平板连同一个 Wi-Fi就能访问页面。不依赖复杂环境最简单的方式是cd 项目目录 python3 -m http.server 8080然后局域网内其他设备通过电脑的局域网 IP 访问http://电脑IP:8080即可。这个方案的好处是图片不用转 Base64加载速度很快适合用投影仪或大屏电视播放。6.3 公网访问做成一个随时能打开的链接如果希望对方无论在哪里打开都能看到就需要把页面放到静态托管服务上。HTML、CSS、JS 这种纯静态页面随便找一个支持静态托管的平台都能搞定免费额度足够个人项目用。上传压缩包解压到网站根目录就能获得一个公网链接。记得把链接生成二维码方便手机扫码打开比复制粘帖长链接要浪漫得多。6.4 手机浏览器的兼容性处理我测试了主流的手机浏览器需要留意这几个点一是100vh在手机浏览器上不等于真实可视区域高度因为地址栏和工具栏会占用空间。强烈建议用window.innerHeight在 JS 里动态设置容器高度。二是在 iOS 上transform: rotate()与will-change同时使用的兼容性最好但不要给太多元素常驻will-change。三是音频文件用 MP3 格式兼容最稳其他格式在部分浏览器上可能不播。还有一个经常被忽略的问题如果对方手机开启了省电模式低端机型上动画会被人为降频卡顿感会格外明显。我目前没有特别完美的解决办法只能建议入场动画控制在 3 秒内完成不要设计 5 秒以上的长动画。最后再分享一个小技巧我第一次帮朋友做这个爱心照片墙的时候把所有照片原图直接塞进去50 张图加起来将近 200MB现场加载了十几秒气氛直接凝固。后来改成统一压缩到 800px 宽、质量 0.8整体 120 张照片压到 12MB打开就是秒出效果。做这种东西讲究的是“对方打开那一瞬间”的情绪加载进度条多一秒都是扣分项所以宁可多花二十分钟压缩照片也别让原图拖后腿。如果你打算真的用它去表白或者准备纪念日惊喜我建议你提前至少一天做好全部照片和文案然后在自己的手机上模拟打开一遍。不要等到当天晚上才传照片相信我当天晚上一定会出各种小状况。预演一遍之后你会发现这面爱心照片墙真的比自己说一百句漂亮话有用。