简介这是一份基于HTML5与CSS3实现的“千年之恋”相亲网站静态页面源码面向前端初学者、课程设计者及对页面布局感兴趣的开发者用于学习语义化标签、Flexbox/Grid布局、表单美化与过渡动效等核心技术。包内共7个文件包含1个HTML页面、1个CSS样式表及5张JPG图片素材压缩包仅336KB结构精简便于快速拆解页面搭建与样式分离的完整流程。已有4455人学习下载适合作为课堂练习或个人作品参考。源码完整涵盖Banner区域、个人资料展示、搜索板块等模块并运用CSS3渐变、阴影、圆角及悬停效果增强视觉体验HTML5语义化结构也有助于理解现代网页的组织方式。通过拆解该示例可直观掌握信息展示类页面的布局思路并在此基础上扩展表单验证、匹配逻辑等功能是前端入门实践中值得阅读的轻量级素材。1. 一个静态页面凭什么撑起“千年”这个主题“千年之恋”这四个字放在 Web 技术栈里通常不是某个产品而是一类 HTML5 CSS3 单页源码的主题命名——古风爱情场景页。它可能是表白页可能是纪念日电子请柬也可能是某个古风社团的品牌落地页。纯静态不需要后端不需要框架一个浏览器打开就是全部。它的核心价值在于:用 CSS3 把“时间跨度”可视化。千年是抽象的但渐变夜空、飘落花瓣、呼吸光晕、滚动渐现的文字时间线这些动画能让抽象的时间感变得可感知。这就是这类源码在 HTML5 网页设计作业、个人作品集、活动 H5 里反复出现的原因——代码量不大视觉上限很高。这篇文从布局骨架、CSS3 动画参数、部署调试到性能优化按一套可复现的方案讲透。你不需要拿到某份原版源码照着这个思路自己就能写出一版“千年之恋”。2. 先搭骨架用 HTML5 语义化标签组织“故事线”2.1 用 section 划分章节而不是 div 堆到底“千年之恋”这类页面有个共同特征叙事结构强。打开页面先看到一句引子往下滚动是相识、相守、承诺结尾是一个寄语表单或二维码。这个结构天然适合用section划分而不是一摞div。main classlove-story section idprologue classchapter chapter--prologue h1千年之恋/h1 p classsubtitle等一场跨越千年的重逢/p a href#timeline classscroll-hint向下开启/a /section section idtimeline classchapter chapter--timeline h2时光书卷/h2 article classbeat>audio idbgm loop preloadauto source srcassets/guqin.mp3 typeaudio/mpeg /audio button idmusic-toggle aria-label播放背景音乐♫ 乐/button script const bgm document.getElementById(bgm); const toggle document.getElementById(music-toggle); toggle.addEventListener(click, () { if (bgm.paused) { bgm.play().then(() { toggle.classList.add(playing); }); } else { bgm.pause(); toggle.classList.remove(playing); } }); /scriptpreloadauto让页面加载后就预取音频数据用户点击按钮时能立即播放。loop控制循环古风音乐通常不需要seek精确跳转所以不需要额外 UI。play()方法返回 Promise在移动端如果被拦截会走 catch所以要用.then做状态切换而不是同步判断。封面开场则建议用video做短循环背景表现“时光流转”的云海、烛火或墨迹扩散。视频要压缩到 2~3 秒、1MB 以内否则首屏加载成本远超它带来的氛围收益。能用 CSS 动画模拟的动效就不要上视频。2.3 段落节奏滚动驱动与锚点布局的配合骨架搭完之后需要让每段内容在滚动时按序出现。常见做法是 IntersectionObserver 监听每个.chapter进入视口时加一个.is-visible类动画由 CSS 过渡触发。const chapters document.querySelectorAll(.chapter); const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(is-visible); observer.unobserve(entry.target); } }); }, { threshold: 0.35 }); chapters.forEach((chapter) observer.observe(chapter));threshold: 0.35表示章节露出 35% 时才触发避免刚露一个边缘就急着开启动画。unobserve是一次性触发滚动回顶部再下来不会重复播放。如果你想让用户回滚时动画反向播放就不要调用unobserve改成根据isIntersecting增删类名。这套骨架不依赖任何框架文件丢到服务器就能跑是 HTML5 网页设计作业或个人站点最常见的起始形态。3. CSS3 是重头戏渐变、关键帧动画与状态保持3.1 用渐变背景铺出“千年”的时空纵深“千年”的感觉首先来自颜色。纯黑背景太死纯白背景太亮古风主题适合深蓝到暗紫的夜空渐变。CSS3 的linear-gradient在这里不只是铺底色而是多层叠加制造近景、中景、远景的层次。body { background: radial-gradient(ellipse at 20% 80%, rgba(255, 190, 120, 0.08), transparent 40%), radial-gradient(ellipse at 80% 20%, rgba(130, 180, 255, 0.10), transparent 45%), linear-gradient(180deg, #0b0e1a 0%, #141a2e 45%, #1d1a33 100%); min-height: 100vh; color: #e4d9c8; font-family: Noto Serif SC, Songti SC, serif; }三层背景的执行顺序是先渲染上面的再渲染下面。第一层是左下角的暖色烛光第二层是右上角的冷色月光第三层是整页的纵向渐变底色。三层叠加之后页面会出现“角落有光、中间过渡自然”的立体感而不是一块平板颜色。注意min-height: 100vh不要写成height: 100vh否则内容超过一屏时背景会被截断滚动下半段露出白底。3.2 花瓣飘落translate3d 与 opacity 的组合动画古风页面最常见的装饰动画是飘落的花瓣。实现思路是用keyframes定义位移和透明度变化再通过多组延迟制造错落感。.petal { position: fixed; top: -10%; left: 50%; width: 14px; height: 14px; background: radial-gradient(circle at 30% 30%, #f7c8d0, #d98a94); border-radius: 100% 0 100% 100%; opacity: 0; animation: petal-fall 12s linear infinite; will-change: transform, opacity; } .petal:nth-child(1) { left: 8%; animation-delay: 0s; animation-duration: 11.4s; } .petal:nth-child(2) { left: 26%; animation-delay: 2.3s; animation-duration: 13.2s; } .petal:nth-child(3) { left: 63%; animation-delay: 5.1s; animation-duration: 10.8s; } keyframes petal-fall { 0% { transform: translate3d(0, 0, 0) rotateY(0deg); opacity: 0; } 8% { opacity: 0.8; } 100% { transform: translate3d(-30px, 105vh, 0) rotateY(540deg); opacity: 0.2; } }几个参数要拆开说。animation-duration设置在花瓣上而不是keyframes里这样每一片花瓣落完一屏的时间不同视觉上更自然。animation-delay用负数也行负延迟会让动画从中间状态直接开始首屏立刻就有花瓣而不是干等。linear是匀速飘落没有明显加速感如果想让花瓣“先缓后急”改成cubic-bezier(0.4, 0.0, 0.6, 1.0)更接近真实重力。rotateY(540deg)让花瓣在下降同时翻转一圈半。这里只旋转 Y 轴是因为 X 轴旋转需要额外维持透视关系成本高且视觉提升不明显。3.3 动画延迟和完成后状态的保持这是 CSS3 动画最容易翻车的地方动画播完元素“啪”地跳回初始状态。原因在于animation-fill-mode默认值是none动画结束后样式回到常规样式表定义的样子。.fade-in { opacity: 0; animation: fade-up 1.2s ease-out forwards; } keyframes fade-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }关键参数是末尾的forwards它表示动画结束后保持to关键帧的样子。三个可选值forwards保持最后一帧backwards在延迟阶段先应用第一帧both两边都管。实际写代码时forwards配合延迟有一个隐藏坑如果延迟 1 秒动画还没开始元素的opacity走的是常规样式。如果你常规样式里写了opacity: 0但没写backwards延迟期间元素就已经是隐藏的因为这条规则一直生效等动画开始后才由动画接管。这只对从隐藏到显示的动画有影响退场动画则必须显式处理forwards 延迟的组合。3.4 动画执行次数和逆向播放时间线章节的呼吸光晕、闪烁星光适合用infinitealternate做循环播放而不是写两个对称的keyframes。.star { width: 4px; height: 4px; background: #ffe9b0; border-radius: 50%; animation: star-twinkle 3.4s ease-in-out infinite alternate; } keyframes star-twinkle { from { transform: scale(0.5); opacity: 0.3; box-shadow: 0 0 4px rgba(255, 220, 140, 0.4); } to { transform: scale(1.15); opacity: 0.95; box-shadow: 0 0 12px rgba(255, 220, 140, 0.9); } }alternate让动画在 from 和 to 之间来回摆动不需要把“变暗”的动作倒着再写一遍。infinite alternate组合下动画从第一帧到最后一帧算一次然后反向执行一次两个方向各算一次iteration。这里提醒一个视觉问题infinite动画的时长建议是质数或小数比如 3.4s、4.7s避免所有星星同频闪烁。多颗星星同时亮同时灭会暴露“这是动画”的破绽。3.5 悬停与过渡用 transition 做交互反馈交互反馈用transition不用animation。两者的边界在于animation是自动或由类名触发的一次播放transition是属性值变化时的平滑过渡适合hover、focus、类名切换。.btn-vow { padding: 12px 32px; border: 1px solid rgba(228, 217, 200, 0.5); background: transparent; color: #e4d9c8; transition: border-color 0.45s ease, background-color 0.45s ease, letter-spacing 0.45s ease; } .btn-vow:hover { border-color: #e8b4b8; background-color: rgba(232, 180, 184, 0.08); letter-spacing: 0.16em; }letter-spacing的过渡在古风按钮、导航链接上效果特别好鼠标悬停时字距拉开配合描边变色比单纯的背景变色更有“书写感”。transition性能上比animation更能利用合成器加速尤其是 transform 和 opacity后面第 5 章会展开。4. 从本地文件到在线页面完整落地流程4.1 文件组织与资源引入规范“千年之恋”这类多页面素材的一体化落地目录不建议全堆在根目录。一个可维护的最小结构如下。love-story/ ├── index.html ├── assets/ │ ├── css/ │ │ └── style.css │ ├── js/ │ │ └── main.js │ ├── fonts/ │ ├── img/ │ └── media/ │ └── guqin.mp3 └── README.md资源路径一律相对路径不要写/assets/...这种绝对路径。本地双击index.html时绝对路径会直接指向磁盘根目录解析失败。部署到子目录时绝对路径也要跟着改相对路径则天然免疫。引资源的顺序也有讲究link relstylesheet放头部script放 body 底部。CSS 放头部是为了避免页面加载瞬间出现无样式裸奔JS 放底部是为了避免阻塞 DOM 解析——尤其背景音乐按钮的监听脚本必须等按钮挂载到 DOM 之后才能生效。4.2 响应式适配与兼容性参数表这类型页面移动端访问占比很高布局适配的重点是字号与动画幅度不是换一套移动端设计。html { font-size: 16px; } media (max-width: 640px) { html { font-size: 14px; } .chapter h1 { font-size: 2rem; } .petal { transform: scale(0.75); } #bgm { display: none; } }根字号从 16px 降到 14px所有用rem单位的间距、字号整体缩小正文变紧凑。花瓣的scale(0.75)直接叠在动画的 transform 上会冲突需要包一层父容器或者把缩放写进动画的关键帧里——更稳的做法是父容器控制缩放子元素只负责动画位移。兼容性方面这张参数表覆盖绝大多数报错场景属性可替代方案兼容性风险backdrop-filter: blur()半透明纯色背景iOS Safari 部分版本需加-webkit-前缀animation-fill-mode: forwards无低版本浏览器会直接忽略表现为跳回初始状态IntersectionObserver滚动监听 节流IE 全系不支持需要 polyfillgap用于 flex 布局改为 marginSafari 14 以下需注意100vh100dvh或min-height: 100vh移动端地址栏遮挡导致高度溢出遇到backdrop-filter失效最简单的处理是给元素默认background: rgba(10, 12, 24, 0.85)然后在该属性生效的浏览器里再覆盖掉。保证功能优先增强渐进。4.3 本地预览与发布部署本地开发时不要直接双击index.html。虽然这个页面不依赖接口双击也能跑但浏览器的file://协议会限制部分资源加载字体文件、音频在个别浏览器下会被跨域策略拦掉。本地起一个静态服务最稳。# Python 3 自带零依赖 python3 -m http.server 8080 # 或 Node.js 环境 npx serve -l 8080然后浏览器访问http://localhost:8080。手机预览用同一个局域网 IP 加端口比如http://192.168.1.5:8080前提是服务器启动时加了--bind 0.0.0.0。部署到线上常见做法是托管到任意静态站点服务或者自己有一台服务器就扔到 Nginx 的 web 根目录里。Nginx 配置只需注意一个未匹配到文件时不要回退到index.html。server { listen 80; server_name example.com; root /var/www/love-story; index index.html; }这是纯静态页面不需要try_files的 SPA 回退不需要后端代理也不需要location规则。配完nginx -t检查语法systemctl reload nginx重载即可。4.4 用 DevTools 排查动画问题动画“没效果”时先不要改代码打开 DevTools 的 Performance 录一段或者看 Elements 面板里元素的已计算样式。第一步确认动画属性有没有被覆盖。CSS 优先级冲突是常态比如.petal里写了opacity: 0.8动画关键帧里也写了opacity动画运行期间以动画为准动画结束后以常规样式为准——如果你设了forwards又以动画结束值为准。排查时在 Elements 面板找到该元素看 Styles 栏里动画相关属性是否被划掉了。第二步看动画是否真的触发了。DevTools 的 Animations 面板会列出所有关键帧动画可以拖动时间轴逐帧回放看到底是触发时机不对还是动画幅度太小没看出来。threshold调成 0.1、位移从 24px 调成 60px 再试这类问题是视觉主观判断问题调参数比查代码快。第三步检查will-change是否滥用。见下一章。5. 进阶让动画在多设备上都流畅的三板斧页面素材全做完最后一步是性能验收。在一个中端手机上打开这个页面如果滚动时花瓣掉帧光晕闪烁卡顿说明动画触到了性能瓶颈。优先用transform和opacity做动画这两者在浏览器合成器层面处理不触发布局重排和重绘。top、left、width、margin这类属性每帧都会重新计算几何结构在低端移动端上立刻掉帧。把第 3.2 节的花瓣动画做一个性能版本keyframes petal-fall-gpu { from { transform: translate3d(0, -10vh, 0) rotateY(0deg); opacity: 0; } to { transform: translate3d(-30px, 110vh, 0) rotateY(540deg); opacity: 0.2; } }初始位置直接由translate3d的 Y 轴负值控制不再依赖top属性。translate3d会触发 GPU 合成层比translate在部分浏览器上多一个独立层。注意will-change: transform, opacity只在动画元素数量少不超过 30 个时写写多了会让浏览器为大量元素维护合成层内存反升。动画暂停回放调试可以用animation-play-state配合 DevTools。在控制台执行document.querySelectorAll(.petal).forEach(p { p.style.animationPlayState paused; });整页动画定格在当前帧可以逐项检查重叠位置、透明度叠加是否好看也能方便截图对比不同参数下的效果。最后一招是把 CSS3 动画和 IntersectionObserver 结合只在章节可见时启动动画。使用animation-timeline: view()是 CSS 原生滚动驱动动画的方案但兼容性还不到生产标准保守路线仍是观察者模式加类名控制性能表现稳定这也是为什么这套方案在各类 HTML5 动画源码里最常被采用。本文还有配套的精品资源点击获取