简介这是一款面向前端初学者及想在特殊节日制造惊喜的用户的表白代码包围绕HTML、CSS与JavaScript构建实现了爱心动画、照片展示与背景音乐播放等交互效果并兼顾手机端与电脑端显示。压缩包共7个文件包含3个可直接运行的HTML页面、2个JPG图片素材及2个txt使用说明整体仅400KB轻量易部署。代码中使用了CSS3动画与旋转特效、JavaScript事件监听与定时控制并通过媒体查询实现响应式布局是理解静态页面向动态互动页面转化的不错范例。目前已有9167人学习下载。解压后按说明文档操作即可快速在浏览器中查看效果适合用于520、情人节等场景同时也能帮助读者掌握页面结构搭建、样式美化与基础交互逻辑的完整思路。1. 一个520压缩包为什么值得拆开看5月19日晚上十点同事发来一个520爱心表白代码.zip。解压后是两个目录电脑端和手机端每个目录里都有一个我爱你.html、一个images文件夹外加test.html和使用说明.txt。第二天就是520他要在晚上约女生吃饭前把页面发过去时间只够换照片改字。这种压缩包在网盘和资源站很常见但多数人是解压、双击、看到页面动一下就以为完事了。实际上它是一份完整的HTMLCSSJS前端小项目覆盖了图片素材管理、CSS3动画、浏览器自动播放策略和移动端适配这几个平时容易踩坑的环节。如果你打算拿它求婚、表白或者只是想知道这类“爱心代码”是怎么跑起来的这篇文拆给你看。2. 拆解压缩包HTML/CSS/JS分工与运行入口2.1 压缩包里的文件清单与使用说明.txt解压后第一件事不是双击HTML而是先看使用说明.txt。很多下载下来的人会把这个文本文档当成“代码文件”用记事本打开后问文本文档怎么运行代码——它其实是操作手册真正运行入口是那两个HTML文件。路径作用关键技术点电脑端/我爱你.html电脑端主页面img照片、audio背景音乐、CSS动画电脑端/test.html电脑端测试页验证图片和音频路径是否正确电脑端/images电脑端素材目录照片、爱心背景、图标手机端/我爱你.html手机端主页面触摸事件、响应式布局手机端/test.html手机端测试页检查移动端素材加载手机端/images手机端素材目录移动端专用素材使用说明.txt部署和替换指引文字版步骤这个结构说明作者在一开始就把“不同设备”当成两个独立场景来处理。电脑端可以放心用悬浮效果和复杂动画手机端则要避免大面积粒子遮挡屏幕。test.html的作用常被忽略它一般会列出页面依赖的所有素材路径打开后能看到哪些图挂了、哪些音频没有读出来。我一般会先开test.html再动主页面避免改完代码才发现images下少一张图。2.2 HTML页面结构图片、音频和文字素材的挂载点不管是电脑端还是手机端我爱你.html的核心结构都逃不出下面这几行!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我爱你/title link relstylesheet hrefcss/style.css /head body div classheart-container img srcimages/photo.jpg altTa的照片 classphoto h1 classmessage520我爱你/h1 audio idbgm srcaudio/love.mp3 loop/audio /div script srcjs/main.js/script /body /html这里有几个必须对得上的路径images/photo.jpg要和压缩包里images文件夹下的实际文件名一致audio/love.mp3同样如此。一旦解压后你改了文件夹名或者把HTML和images放到不同层级页面就会变成“纯文字版”因为浏览器根本找不到资源。audio的loop属性是让音乐循环播放但注意autoplay在这里通常是无效的原因后面会讲。这段代码里最容易被忽略的是viewport标签。没有它手机端打开HTML会把整个页面缩成一团字体和照片都小到看不清。加了这个meta浏览器才按设备的实际宽度渲染页面这是移动端适配的第一道门槛。2.3 CSS动画与JS事件在表白页里的边界HTML只负责“有什么”CSS和JS各自管“长什么样”和“怎么动”。以照片为例旋转和缩放这种周期性变化用CSS最省事.photo { animation: rotateHeart 4s ease-in-out infinite; } keyframes rotateHeart { 0%, 100% { transform: rotate(0deg) scale(1); } 50% { transform: rotate(360deg) scale(1.05); } }这里的关键点是transform是合成属性不会触发布局重排动画再快也不容易掉帧。ease-in-out让旋转在两头慢、中间快视觉上更柔和不生硬。infinite让动画无限次循环正好符合表白页一直挂着不熄灭的需求。而“点击照片后换下一张”“点击屏幕后播放音乐”这种用户行为触发的逻辑则要交给JavaScriptconst photo document.querySelector(.photo); let index 0; const photoList [images/1.jpg, images/2.jpg, images/3.jpg]; photo.addEventListener(click, function () { index (index 1) % photoList.length; this.src photoList[index]; });index (index 1) % photoList.length是循环切换的核心取模运算让序号到末尾后自动回到0。这种方式比每次if判断都简洁而且后续要加照片只需要往photoList里追加路径不用改逻辑。CSS负责“默认状态”JS负责“交互后的状态”两者边界清楚后面替换图片时才不会越改越乱。3. 爱心动画与照片展示CSS3动画和JS交互的实现细节3.1 用CSS3画出爱心形状的两种做法很多“爱心代码”其实没有图片素材直接用CSS画一个爱心。最常见的两种做法我都测过一种是clip-path剪出爱心的形状另一种是用两个圆形加一个旋转的方块拼出来。先看clip-path形状文件小好控制.heart { width: 100px; height: 100px; background: #ff4d6d; clip-path: path(M50,90 C10,60 0,30 20,15 C35,5 50,15 50,25 C50,15 65,5 80,15 C100,30 90,60 50,90Z); }这段代码里path()用的是SVG路径语法通过贝塞尔曲线控制爱心的弧线边缘。优点是整颗爱心是一个元素可以直接加animation做缩放缺点是clip-path的兼容性在旧版浏览器里不够稳定比如早期的Chrome需要-webkit-前缀所以压缩包里的版本如果用了这个写法在手机端最好用真机测一下。另一种经典做法是用伪元素拼爱心兼容性更好.heart { position: relative; width: 40px; height: 40px; transform: rotate(45deg); background: #e63946; } .heart::before, .heart::after { content: ; position: absolute; width: 40px; height: 40px; border-radius: 50%; background: #e63946; } .heart::before { left: -20px; } .heart::after { top: -20px; }这里思路是把正方形旋转45度再在左上和右下各放一个半圆拼成爱心。理解这个结构后调颜色只需要改background一处调大小需要同时改width、height以及::before和::after的尺寸否则三个圆的比例会塌。我一般会用CSS变量统一管理这几个值这样后期只改一个变量就能等比例缩放。3.2 照片切换与爱心粒子JS控制的关键参数照片展示通常不是死板的一张图而是配合爱心粒子一起出现。粒子效果最常见的做法是JS动态创建元素然后让它们随机飘落。function createParticleHearts() { const count 30; const container document.getElementById(particles); for (let i 0; i count; i) { const heart document.createElement(div); heart.className particle-heart; heart.style.left Math.random() * window.innerWidth px; heart.style.animationDelay Math.random() * 5 s; heart.style.fontSize Math.random() * 20 14 px; container.appendChild(heart); } }这里count控制粒子的数量30个在手机端已经比较密集再大就容易遮挡照片animationDelay让粒子不会同时出现而是分成几波落下视觉上更自然fontSize加上Math.random()制造大小不一的层次感。要注意的是window.innerWidth在移动端会受地址栏伸缩影响我一般会在resize事件里重新计算避免旋转屏幕后粒子跑出屏幕。粒子的CSS动画可以这样配合.particle-heart { position: absolute; top: -10px; animation: fall 4s ease-in infinite; } keyframes fall { 0% { transform: translateY(-10px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(360deg); opacity: 0; } }动画里的translateY(100vh)保证粒子无论在任何屏幕高度下都能落到视口底部比固定像素值更通用。opacity从1渐变到0粒子在下落过程中逐渐消失不会突然消失造成闪烁感。3.3 音频播放的时间点控制从点击到自动播放浏览器对音频有严格的自动播放策略直接给audio加autoplay在Chrome和Safari里通常会被拦截。这就是为什么压缩包里的表白页多半会在首页放一个“点击开始”的透明按钮。const bgm document.getElementById(bgm); const startBtn document.getElementById(startBtn); startBtn.addEventListener(click, function startMusic() { bgm.play(); this.style.display none; bgm.addEventListener(timeupdate, function () { if (this.currentTime 60) { this.currentTime 0; // 循环时避免音量突变 } }); });bgm.play()返回一个Promise在部分浏览器中如果播放失败会reject所以更稳的写法是在play()后面加catch。上面代码里timeupdate监听的作用是当播放超过60秒后从头开始而不是依赖loop属性。因为某些低版本WebView在loop循环时会有短暂停顿手动归零反而更顺滑。需要注意startBtn一定要是用户真实点击的元素如果JS里用setTimeout模拟点击依然会被浏览器判定为非用户手势音频照样起不来。4. 电脑端与手机端适配响应式布局与本地部署4.1 为什么同一个HTML要分“电脑端”和“手机端”既然有了响应式布局为什么压缩包还要分两个版本我看了不少同类资源答案很现实电脑端的表白页为了效果好常常使用大量粒子和悬浮效果手机端的硬件性能撑不住另外电脑端和手机端的交互方式完全不同电脑端是鼠标悬浮触发动画手机端则需要touchstart事件而且没有hover状态。分两个HTML可以减少很多判断逻辑。比如电脑端可以放心用3D旋转media (min-width: 769px) { .photo { transform: perspective(600px) rotateY(0deg); } .photo:hover { transform: perspective(600px) rotateY(15deg); } }这段代码让照片在鼠标悬停时有轻微的3D倾斜perspective(600px)控制景深数值越小倾斜感越强600px是刚好看得舒服的档位。手机端没有hover这个media里的规则就不会命中省得额外写JS去判断设备类型。4.2 用media和viewport让一个页面适配两种屏幕如果你不想维护两套HTML也可以在一个页面里做完整适配。核心是两件事viewport标签和media媒体查询。meta nameviewport contentwidthdevice-width, initial-scale1.0这段代码在2.2节出现过但它决定了页面宽度是跟随设备宽度还是按980px的默认值渲染。没有它手机端的media会全都失效。.heart-container { display: flex; justify-content: center; align-items: center; min-height: 100vh; } media (max-width: 768px) { .heart-container { flex-direction: column; padding: 20px; } .message { font-size: 1.2rem; } .photo { width: 90vw; height: auto; } }min-height: 100vh让容器撑满整个视口高度配合Flexbox让内容垂直居中。手机端切换到flex-direction: column照片和文字从左右排列变成上下排列这是移动端最常用的布局调整。90vw表示图片宽度占屏幕宽度的90%vw单位很适合这种“撑满又不贴边”的场景。如果你发现手机端照片比电脑端还大通常是忘了设置height: auto导致图片被90vw拉宽后高度按原比例失真。4.3 双击我爱你.html还是启动本地服务部署与使用说明使用说明.txt里通常会写两种运行方式最简单的是直接双击HTML文件浏览器会以file://协议打开。这适合自己看效果但如果要把页面发给对方就不行了——对方收到的只是一堆文件反而容易显示错乱。我更推荐在同一个局域网下用本地服务调试。比如你在写了一个静态页面后用命令行开启一个简单的HTTP服务cd 520爱心表白代码/电脑端 python -m http.server 8080然后浏览器访问http://localhost:8080/我爱你.html。手机端和电脑端连同一个Wi-Fi手机浏览器访问http://你的电脑IP:8080/我爱你.html即可。这里8080是端口号换成任意空闲端口都行。用HTTP方式访问音视频和图片的加载策略和部署到线上服务器时一致能提前发现很多file://下看不出来的问题。如果对方不在同一个局域网就需要把整个文件夹上传到服务器或对象存储。现在常见的做法是丢到GitHub Pages或任意静态托管平台部署后拿到一个公网HTTPS地址再把链接发过去。注意压缩包里的中文文件名我爱你.html在部分服务器上会产生URL编码问题上线前最好改成index.html省掉一堆奇怪的404。test.html在这种场景下特别好用它会自动检测images和音频文件是否存在并列出缺失列表。我每次部署后第一件事就是打开test.html确认资源全部加载再打开主页面。另外如果下载的是加密zip常见的zip密码移除工具可以尝试但正规资源包通常不设密码你更需要担心的是解压后的文件编码Windows下解压中文文件名偶尔会乱码用7-Zip解压时选择“UTF-8”可以避免。5. 进阶把520表白页改成可配置的求婚页5.1 把名字、照片和告白语抽成config对象临时改HTML里的文字和图片容易手滑比如引号没闭合导致整页白屏。我习惯在JS文件顶部放一个配置文件所有个人信息集中管理const config { herName: Lily, message: 从初见到现在每次想到你都会笑, photos: [ images/1.jpg, images/2.jpg, images/3.jpg ], bgm: audio/love.mp3, startTime: 2025-05-20T20:00:00 };然后渲染页面时统一从这个对象取值document.getElementById(name).textContent config.herName; document.getElementById(message).textContent config.message; document.getElementById(bgm).src config.bgm;这样做的好处是表白当天只需要改JS前8行不需要翻HTML结构。尤其要结婚的人照片可能有一两百张用photos数组统一管理后切换逻辑可以直接复用第2.3节里的取模循环不需要再写一遍src赋值。5.2 加入倒计时与“我愿意”按钮最后的临门一脚求婚后如果对方同意了我一般会让页面出现一层爱心雨。倒计时按钮可以增加仪式感比如约定当天晚上八点自动播放音乐页面显示“距离20:00还有X分X秒”。const target new Date(config.startTime).getTime(); const timer setInterval(() { const now new Date().getTime(); const diff target - now; if (diff 0) { clearInterval(timer); document.getElementById(bgm).play(); return; } const minutes Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60)); const seconds Math.floor((diff % (1000 * 60)) / 1000); document.getElementById(countdown).textContent ${String(minutes).padStart(2, 0)}:${String(seconds).padStart(2, 0)}; }, 1000);这里padStart(2, 0)的作用是把个位秒数补成两位数避免显示成8:5这种难看格式。当倒计时结束后clearInterval停止计时同时调用bgm.play()开始播放。注意这个play是由定时器触发的并不属于用户手势所以在Safari里很可能会被拦截。可靠做法是倒计时页面先放一个“进入倒计时”按钮把点击事件和播放事件绑定在一起到点了只切换音量或内容而不是直接调play。“我愿意”按钮的实现更简单点击后往容器里追加一行全屏爱心const agreeBtn document.getElementById(agreeBtn); agreeBtn.addEventListener(click, function () { this.textContent 我也喜欢你; createParticleHearts(60); });这里的60是粒子密度比首页的30多一倍用来营造爆发感。需要注意按钮在点击后要立即禁用或改变文本否则连续点击会生成几百个粒子手机端很容易卡死。建议在createParticleHearts里加一个内存保护当已有粒子数量大于80时先清空容器再追加。到这一步520表白页已经从“能看”变成了“能求婚”后续你要换日子、换音乐、换倒计时时间全部只需要改动config对象。本文还有配套的精品资源点击获取