简介面向情人节、纪念日等场景的情侣表白网页成品适合具备HTML、CSS与JavaScript基础的开发者参考与二次定制。页面以浪漫配色、爱心元素和动态交互为主线包含首页、相册、恋爱历程等4个HTML页面配套7个CSS样式表与8个JavaScript脚本并附带JPG、PNG、GIF、SVG及字体图标等素材日期与照片均可替换为使用者自己的内容便于快速搭建带有个人心意的专属页面。压缩包共43个文件约1.08MB除页面、样式和脚本外还包含Bootstrap相关组件样式、字体文件及source map结构完整可直接运行并继续调整布局、动画与响应式表现。已有9240人学习下载适合作网页课程练习、前端入门项目或节日礼物制作参考读者可获得可运行的成品页面、样式组织方式、鼠标爱心等交互实现思路以及图片、字体等静态资源的配置范例。1. 情人节前两天临时接的活A 同学要做一个送给女朋友的网页表白用的。他明确说不要模板站那种满屏闪烁爱心也不要一打开就自动播放音乐——这确实是一个很实际的要求。这类「情人节表白网页」看着像玩票实际要处理的问题很正经首屏加载、图片体积、动效帧率、移动端适配、分享卡片预览任何一条出问题礼物当场变成尴尬。他要的效果很简单一个链接发过去对方在手机上点开一屏一屏往下滑情绪递进。下面把我经手的那套结构完整拆开包含页面骨架、动效实现、内容配置和上线前的验收清单换掉名字和照片就能直接用。2. 需求拆解与页面骨架把「表白」拆成四屏情绪节奏动手写代码之前先把「感动」这件事翻译成可执行的约束。这一步做扎实后面写 CSS 才不会反复推倒重来。2.1 从「谁在什么设备上看」倒推需求送礼场景有三个硬约束基本决定了整个技术方案对方大概率在手机上打开可能是在聊天软件的内置浏览器里她不会读任何说明文字页面必须自己解释自己她不会等——超过三秒白屏情绪就断了。所以需求不是「功能越多越好」而是「三秒内看懂、滑到底不卡、点哪里都不出错」。我一般会先把这三条写成表后面每个技术决定都能在表里找到依据避免写着写着开始堆特效。使用场景真实约束对应的设计决定聊天窗口点开链接首次加载无缓存网络是 4G首屏只留文字和 CSS 渐变图片全部延后加载手机上竖屏滑动视口窄操作靠拇指单列布局交互元素集中在下方 1/3可能被反复回看要能长期挂着不失效纯静态资源不依赖任何后端接口她自己一个人看没有旁白解释每个模块自带标题和一句引导文案这张表里最后一条最容易被忽略。很多人做出的表白页第一屏是一颗跳动的心脏第二屏是照片中间没有任何文字衔接看的人不知道要往下滑。加一句「往下看看」的成本是零效果差很多。2.2 四屏结构与文件组织情绪节奏我固定用四屏第一屏给名字和日期做一个极简的入场第二屏打字机告白话术是全篇的情绪高点第三屏照片墙加时间轴用具体的事把情绪落地第四屏收尾留一个点击彩蛋和一句短话。四屏之间用滚动驱动不做强制翻页因为强制翻页在手机内置浏览器里很容易卡住。文件结构也按这个节奏切一个模块一个文件改内容不用翻整页代码gift-page/ ├── index.html # 唯一入口四个 section 对应四屏 ├── css/ │ ├── base.css # 变量、重置、字体、配色先改这个 │ └── scene.css # 四屏各自的布局与动画 ├── js/ │ ├── typing.js # 第二屏打字机 │ ├── heart.js # 首屏 Canvas 粒子 │ └── timeline.js # 第三屏内容渲染数据在 moments.js ├── data/ │ └── moments.js # 时间轴文案与照片路径改内容只碰这里 └── img/ # 照片统一 1200px 宽、webp 优先把内容抽到data/moments.js是个小决定但收益明显以后加一条纪念日只改一个数组不用在 HTML 里找位置。照片放img/统一命名成01.jpg、02.jpg配合数组下标加照片不用改代码。2.3 技术选型为什么坚持原生三件套有人会问现在前端脚手架这么方便为什么不用框架。这个项目的答案是框架解决的问题这里一个都没有框架带来的成本这里全都有。方案首屏体积改内容门槛离线可用适用判断原生 HTML/CSS/JS约 20-60 KB会改文字就会改双击即可打开本项目选它框架 构建工具150 KB 起需要装环境跑命令需先 build单页面没必要现成模板站生成不可控只能在模板里填空依赖平台改不动细节真正的理由是「可交付性」。这份东西最终要能压缩成一个文件夹发给对方或者丢到任意静态托管上甚至存进 U 盘双击打开。原生三件套在这三件事上都是零成本而框架要先npm install才能看到效果对一份礼物来说太重了。提示不用框架但可以用 CDN 引一个动画库。只是每多一个外部依赖就多一个「对方网络不好时白屏」的可能。我一般全站零外部请求字体也用系统字体栈兜底。3. 首屏与动效实现纯 CSS 渐变加 Canvas 粒子的组合打法首屏决定了她愿不愿意继续往下滑。这一屏我的原则是视觉冲击靠 CSS动态细节靠 Canvas两者都不能拖慢首帧。3.1 用 CSS 变量固定配色与间距配色不要散落在各个文件里。所有颜色、圆角、间距抽成变量放在base.css顶部换风格只改这一块这是省时间的关键/* base.css —— 改这 8 行就能整体换风格 */ :root { --bg-deep: #1b1024; /* 背景主色深色更衬照片 */ --bg-soft: #2a1733; /* 渐变第二色与主色同色系 */ --accent: #ff6b8a; /* 强调色用在日期、按钮、粒子上 */ --text-main: #f6eef7; /* 正文色对比度 ≥ 4.5:1 */ --text-sub: #c9b6cf; /* 次要文字弱化但不模糊 */ --radius: 16px; --gap: 24px; --font: -apple-system, PingFang SC, Microsoft YaHei, sans-serif; } body { margin: 0; font-family: var(--font); color: var(--text-main); background: radial-gradient(circle at 50% 0%, var(--bg-soft), var(--bg-deep) 70%); }radial-gradient从顶部中心扩散比线性渐变更像一束光打在屏幕上方也不用任何图片资源首帧几乎零成本。--text-sub的亮度要控制住暗背景上太多灰字会显得脏。字体栈第一位放系统字体避免中文字体文件动辄几 MB。3.2 打字机告白节奏比代码重要第二屏的告白话术用逐字显示。这里最容易出问题的是匀速——每秒固定 10 个字读起来像机器人在播报情绪是平的。// typing.js —— 逐字推进标点处停顿播完即停 const TEXT 从那天起我的日历上就多了一个日子。; const el document.querySelector(#typing); const PAUSE { : 180, 。: 320, 、: 120 }; // 标点额外停顿单位 ms const BASE 90; // 基础字间隔 ms let i 0; function tick() { if (i TEXT.length) return; // 不循环循环会打断情绪 const ch TEXT[i]; el.textContent ch; // 用 textContent避免特殊字符被当成标签 setTimeout(tick, BASE (PAUSE[ch] || 0)); } // 进入视口再开始避免用户还没滑到就播完了 const io new IntersectionObserver(([e]) { if (e.isIntersecting) { tick(); io.disconnect(); } }, { threshold: 0.5 }); io.observe(el);三个参数值得调BASE控制整体速度90ms 接近正常语速偏慢一点适合告白场景PAUSE是情绪停顿句号停 320ms 相当于一次呼吸threshold: 0.5表示元素露出 50% 才开始播手机上滑到一半就能看到字一个个冒出来比页面加载就播完更有参与感。需要多段文字时不要往一个元素里塞br改成数组存多段第一段播完再播第二段中间留 600ms 间隔视觉上更像在思考。3.3 Canvas 粒子爱心先算点再让点收敛首屏那颗心用 CSS 画也能做但粒子版有细微的呼吸感。核心是心形参数方程取点再让每个粒子朝自己的目标点慢慢靠。// heart.js —— 心形参数方程撒点 缓动收敛 const cv document.querySelector(#heart); const ctx cv.getContext(2d); const DPR Math.min(window.devicePixelRatio || 1, 2); // 上限 2 倍高分屏不掉帧 let W 0, H 0, dots []; function resize() { W cv.clientWidth; H cv.clientHeight; cv.width W * DPR; cv.height H * DPR; ctx.setTransform(DPR, 0, 0, DPR, 0, 0); // 后续都用 CSS 像素坐标 } resize(); window.addEventListener(resize, resize); // 心形方程x 16sin³ty 13cos t − 5cos2t − 2cos3t − cos4t function heartXY(t, k) { return { x: 16 * Math.sin(t) ** 3 * k, y: -(13 * Math.cos(t) - 5 * Math.cos(2 * t) - 2 * Math.cos(3 * t) - Math.cos(4 * t)) * k, }; } function build(count 220) { const k Math.min(W, H) / 40; // 缩放到当前画布40 是方程的横向跨度 dots Array.from({ length: count }, () { const t Math.random() * Math.PI * 2; const p heartXY(t, k); return { tx: W / 2 p.x, // 目标点 ty: H / 2 p.y, x: Math.random() * W, // 初始位置随机散开 y: Math.random() * H, r: 0.8 Math.random() * 1.6, // 半径 0.8~2.4px a: 0.35 Math.random() * 0.5, // 透明度制造层次 }; }); } build(); function loop() { ctx.clearRect(0, 0, W, H); for (const d of dots) { d.x (d.tx - d.x) * 0.045; // 缓动系数越小越慢越柔 d.y (d.ty - d.y) * 0.045; ctx.globalAlpha d.a; ctx.fillStyle #ff6b8a; ctx.beginPath(); ctx.arc(d.x, d.y, d.r, 0, Math.PI * 2); ctx.fill(); } requestAnimationFrame(loop); } loop();0.045这个缓动系数决定了「聚拢」的手感太大0.2 以上是一瞬间成形没有过程太小0.01要好几秒才勉强像个心。0.04 到 0.06 之间最舒服。粒子数 220 在千元机上能稳在 55 帧以上超过 400 就开始掉。降级也要考虑如果window.matchMedia((prefers-reduced-motion: reduce)).matches为真或者屏幕宽度小于 360直接画一次静态心形、不跑requestAnimationFrame省电也省得卡。4. 照片墙与时间轴把回忆做成可滚动的内容层第三屏是全篇的信息密度高点也是最容易因为图片太大而卡死的地方。这一屏的目标是「滑得顺、看得清、加内容不难」。4.1 照片墙等比裁切与懒加载照片来源五花八门有横有竖有截图直接铺会高低不齐。统一处理成固定宽高比再用object-fit裁切视觉上就齐了。/* scene.css —— 统一比例避免图片高低不齐 */ .gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); } .gallery img { width: 100%; aspect-ratio: 3 / 4; /* 竖构图手机屏幕更占优势 */ object-fit: cover; /* 等比裁切不拉伸变形 */ object-position: center 30%;/* 人像偏上焦点通常在上半部 */ border-radius: var(--radius); background: var(--bg-soft); /* 加载中占位避免白洞 */ content-visibility: auto; /* 屏幕外的图不参与渲染 */ }aspect-ratio是这里的关键它在图片加载前就占住位置避免图片一张张加载时页面不停往下跳——那种抖动在手机上非常明显。object-position: center 30%是因为人像的构图重点普遍偏上居中裁容易把脸切掉。图片本身要提前压宽度 1200px 足够格式优先 webp单张控制在 150KB 以内超过就说明该压了。加载属性加上loadinglazy和decodingasync让浏览器自己推迟屏幕外的图。数量别超过 9 张两列布局正好排满再多就成了相册不是礼物了。4.2 时间轴用一份数组驱动整屏内容时间轴的所有内容都从数组来渲染函数只写一次。这样加一条纪念日、换一张照片都不用碰结构// moments.js —— 内容层改这里就够了 export const MOMENTS [ { date: 2023-05-20, title: 第一次一起吃饭, text: 你把香菜全挑给了我。, img: img/01.webp }, { date: 2023-10-01, title: 第一次出远门, text: 高铁上你睡着了我一直没敢动。, img: img/02.webp }, { date: 2024-02-14, title: 第一个情人节, text: 下雪等了三小时公交。, img: img/03.webp }, ];// timeline.js —— 一次渲染按日期升序缺图时降级为纯文字卡 import { MOMENTS } from ../data/moments.js; const wrap document.querySelector(#timeline); MOMENTS .slice() // 不改原数组 .sort((a, b) a.date.localeCompare(b.date)) // YYYY-MM-DD 可直接字符串比较 .forEach((m, idx) { const li document.createElement(li); li.className moment; li.innerHTML ${m.img ? img src${m.img} alt loadinglazy decodingasync : } time datetime${m.date}${m.date.replace(/-/g, .)}/time h3${m.title}/h3 p${m.text}/p; wrap.appendChild(li); li.style.setProperty(--delay, ${idx * 80}ms); // 逐条淡入错开 80ms });sort用localeCompare是因为日期写成YYYY-MM-DD后字符串比较等价于时间比较不需要new Date()解析少一层出错可能。--delay传给 CSS 的animation-delay每条卡片错开 80ms 淡入滑动时像是一条条浮上来比整块出现自然。缺图的条目只是少一张图不会留下空白框——写内容时经常有一条没配图这个降级很有用。4.3 背景音乐把播放权交回给用户音乐是加分项也是事故高发区。移动端浏览器普遍禁止无交互的自动播放硬写autoplay的结果是「有的手机响、有的不响」非常尴尬。// 用户点了才播失败时静默降级不弹报错 const bgm document.querySelector(#bgm); const btn document.querySelector(#play); btn.addEventListener(click, async () { try { if (bgm.paused) { await bgm.play(); btn.textContent 暂停; } else { bgm.pause(); btn.textContent 播放; } } catch (err) { console.warn(音频播放被拒绝, err.name); // 常见为 NotAllowedError btn.hidden true; // 播不了就把按钮藏掉 } });按钮文案要跟着状态变否则用户点第二次会以为坏了。音频文件压到 1MB 以内、128kbps 单声道即可反正手机外放听不出差别。循环属性用loop但别设volume期望控制音量——部分内置浏览器会忽略直接在源文件里把响度调好更稳。5. 上线前的避坑清单五类最容易翻车的问题这一节是按「现象 → 原因 → 解决」整理的。里面每一条都是我自己或者身边人真实踩过的坑上线前对照着过一遍能省掉大部分返工。5.1 资源与路径类现象电脑上打开一切正常发到手机上图片全部裂开或者只剩第一屏。原因路径写成了D:\照片\001.jpg这种本地绝对路径或者用了/img/01.jpg这种以斜杠开头的根路径。前者只在你自己电脑上有效后者要求部署在域名根目录一旦放在子目录里就全部 404。解决一律用相对路径img/01.jpg文件名改成纯英文数字。交付前用「另存整个文件夹、换一台电脑双击打开」的方式验一遍能过就没问题。5.2 音频与自动播放类现象自己测试时音乐正常对方打开没声音或者反过来声音突然炸出来。原因带autoplay的音频在不同浏览器的处理策略不一致有交互历史的页面会放冷启动的会被拦。另外很多人忘了把系统音量、静音开关考虑进去一打开就是满音量。解决不写autoplay改成用户点击按钮触发并且用try/catch包住play()失败就把按钮隐藏而不是报错。音频源文件先做一次响度归一别指望代码调音量。5.3 移动端与分享类现象页面在手机上横向能拖动出现一条白边或者发给对方时聊天窗口里只有一个光秃秃的链接。原因某个元素宽度超过了视口常见是固定width: 1200px的图片容器或者没设max-width的表格撑出了横向滚动分享卡片则是因为页面里没有 Open Graph 之类的元信息。解决body加overflow-x: hidden只是遮盖根本做法是把所有固定宽度换成100%加max-width。分享信息在head里补齐标题、描述和一张比例合适的缩略图缩略图别用首屏大图单独裁一张方图更稳。5.4 内容与文案类现象滑到某一屏字数明显比别处多读起来很累或者某条时间轴的日期写成了未来时间。原因写文案的时候在电脑上写、在电脑上看屏幕宽一行能放三十几个字感觉不多。手机上同样的文字要占五六行。解决每段控制在 40 字以内超过就拆成两条。日期全部复查一遍尤其是「第一次见面」这种要靠回忆的条目写错了比不写更尴尬。5.5 性能与首屏类现象点开链接后白屏两秒然后整页「唰」地出现或者滑动时照片墙一顿一顿。原因图片没有压缩单张几 MB或者所有图片都在首屏同步加载把带宽占满了。解决先跑一遍压缩宽度 1200px、webp、单张 150KB 以内首屏只放文字和渐变图片全部loadinglazy。判断标准很直接——在手机浏览器里开「低速网络」模拟三秒内能看到第一屏文字就算合格。6. 交付验收六项自测和一张打勾表交付前我会强制走一遍下面这张表每项都亲自动手不靠「应该没问题」。验收项具体做法合格线首屏速度手机开低速网络重进3 秒内出现第一屏文字图片完整换一台没打开过的设备看无裂图、无占位白框滑动流畅从顶滑到底再回顶无明显掉帧、无横向白边音乐可控点击播放/暂停各两次文案跟状态一致分享预览把链接发给自己有标题和缩略图文案校对出声读一遍全部文字无错别字、无未来日期「出声读一遍」这条看着多余但它是唯一能发现语病的方法。默读会大脑自动补全念出来才会卡壳。答辩或者交付时别人问「为什么不用框架」答案就一句这份东西要能压缩成文件夹直接打开、放三年还能看原生三件套在这两条上没有对手。问「动效怎么做的」回答顺序是参数方程取点、缓动收敛、requestAnimationFrame驱动不要从「我用了 Canvas」讲起。从那以后我每次交付前都会拿自己的手机、用另一张卡、在没连过自己 Wi-Fi 的环境里打开一遍——因为所有的「应该没问题」都栽在这最后一步上。希望帮到你。本文还有配套的精品资源点击获取
