简介一份基于 HTML5 与 CSS3 的「千年之恋」相亲网站页面源码以静态网页方式呈现浪漫主题的内容模块适合前端初学者、网页设计课程作业或小型展示页参考。压缩包共 7 个文件包含 1 个 HTML 页面、1 个 CSS 样式表以及 5 张 JPG 图片素材包括横幅、按钮、背景图、步骤图与 Logo 等整体仅 336KB解压后即可在浏览器中直接打开查看效果。已有 4455 人浏览学习说明该案例在同类静态页面资源中有一定参考热度。通过阅读源码可以了解 HTML5 结构标签与 CSS3 样式布局在真实页面中的组织方式也能看到图片素材如何与页面模块互相配合代码量不大便于逐行分析、修改主题或替换文案适合作为练习前端基础技能的小项目。1. 千年之恋不只是浪漫文案它是一个可以拆开复用的HTML5动画模板“千年之恋”这个标题乍看像一首歌的落地页或者是某个古风游戏的宣传页。但如果把视角切回前端工程它更接近一类典型的“时间主题”HTML5源码项目用一段自动播放的页面把跨越千年的叙事感通过星空背景、日夜交替、文字渐显这样的视觉元素堆出来。这类源码在课程设计、面试作品、自媒体展示页里出现频率很高也是学习CSS3动画和HTML5语义化结构最直观的练习载体。我拿到这种标题时不会先去渲染氛围而是先把页面当作一个动画系统来看。整个页面要解决三件事结构怎么组织才不会让动画脚本乱掉、视觉动效用什么方式实现才有“时间流逝”的质感、用户交互如何介入才不会打断动画节奏。这套思路并不只服务于这个标题把这个模板里的关键词从“千年之恋”换成“四季流转”“山海之旅”整个架构依然成立。下面我按结构、动效、交互、验证的顺序把一套可直接落地的实现方式讲透。2. 用HTML5语义化骨架承载“千年之恋”的时间叙事2.1 为什么页面结构要先于样式思考做这类页面最容易犯的错是一上来就写漂浮粒子或流星动画结果动画元素把正文挤到看不见或者背景层和文字层互相遮挡。页面要讲一个“千年”的故事故事必须有段落。HTML5在这里提供的不只是新的标签名而是一种按内容分区来组织页面的思路。我一般把整个页面拆成四层容器顶层是文字叙事区中间是主角图形区底层是持续运行的背景动画区再往下还有一层全局遮罩用来控制阅读焦点。这种分层思路对应到HTML上就是利用header、main、section、footer这类语义化标签把页面划成独立的时间章节。每个section承载一个时间段比如“初见”“离别”“守候”“重逢”每个section内部再放标题、描述文字和一个可触发动画的元素。这样做的好处是CSS3动画可以通过>!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 classstage div classsky idskyLayer aria-hiddentrue/div div classstars idstarField aria-hiddentrue/div header classhero h1千年之恋/h1 p classsubtitle一段跨越千年的等待/p /header main section classstory-section>:root { --night-sky: #0a0e1f; --dawn-sky: #2b193d; --dust-sky: #5b3a4e; --text-glow: rgba(255, 215, 150, 0.9); } .sky { position: fixed; inset: 0; z-index: 0; background: var(--night-sky); animation: day-and-night 24s ease-in-out infinite alternate; } .stars { position: fixed; inset: 0; z-index: 1; background-image: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 65%, #ffe9c4, transparent), radial-gradient(2px 2px at 40% 80%, #cdd7ff, transparent); background-repeat: no-repeat; animation: twinkle 4s ease-in-out infinite alternate; } .story-section { position: relative; z-index: 2; min-height: 60vh; padding: 8vh 6vw; } .story-section h2 { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s ease; text-shadow: 0 0 12px var(--text-glow); } .story-section.visible h2 { opacity: 1; transform: translateY(0); } keyframes day-and-night { 0% { background-color: var(--night-sky); } 50% { background-color: var(--dawn-sky); } 100% { background-color: var(--dust-sky); } } keyframes twinkle { 0% { opacity: 0.4; transform: scale(1); } 100% { opacity: 1; transform: scale(1.05); } }这段代码的挂载逻辑可以拆成几个关键点。.sky上的animation简写属性完整写法是animation-name: day-and-night; animation-duration: 24s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-direction: alternate;。其中infinite alternate让动画在两种状态之间来回播放不会出现从终点跳回起点的生硬感。.stars用了radial-gradient模拟大小不一的星点而不是生成几十个小div。这样做的好处是粒子完全由GPU渲染不占用DOM节点数。闪烁动画用的是opacity和scale的组合这两种属性都能避开layout和paint阶段性能最优。h2的入场效果用的是transition而不是animation。区别在于animation定义的是“自己主动演一遍”关键帧在定义时就写死了从哪到哪transition定义的是“当状态改变时怎么过渡”配合后面JavaScript添加的.visible类使用。这种方式更符合滚动触发的场景——元素本身不知道用户什么时候滚到它面前只能被动响应类名变化。3.2 动画执行次数、延迟与完成后状态的保持热词里反复出现“css3动画延迟和完成后状态的保持”和“css3动画执行次数和逆向播放”这两个点在实际调参中确实是新手最容易失控的地方。我把它们合在一起说明因为它们经常同时出现在一个动画属性配置里。延时用animation-delay控制单位是秒。在“千年之恋”这种叙事页里delay的用途不是让所有动画同时启动而是让它们载入后错开几秒依次浮现。比如首屏打开后星空先亮起来1.5秒后标题文字上移0.8秒后副标题淡入这种错落感让页面显得有编排。完成后状态的保持用的则是animation-fill-mode。默认情况下动画播放结束会把元素样式还原成关键帧之前的状态。如果你希望动画结束之后停在最后一帧的画面就要把fill-mode设为forwards。在页面载入类型的动效里forwards几乎必加因为谁也不想看到文字渐显结束后又突然消失再回到opacity: 0的状态。执行次数与逆向回放则对应animation-iteration-count和animation-direction。count很好理解填1就是播一次infinite循环播放direction的可选值里有一个alternate它会让动画在第1次播完后从最后一帧往第一帧方向播。我建议循环类动效优先考虑alternate因为很多循环动画用正反交替比重新播一遍更自然。星光闪烁如果每次都从暗到亮再跳回暗会有一帧闪烁感而alternate让它在亮和暗之间来回呼吸观感完全不同。为了便于调试我把这几个参数整理成表格。这张表也是我每次给动效调参时的自查清单。属性可选值示例在这个项目里的作用容易踩的坑animation-duration2s/500ms决定一次动画时长过短显得急促过长让人觉得卡animation-delay0s/1.5s让元素错峰入场负值会跳过动画前半段新手常忽略animation-iteration-countinfinite/3控制循环次数叙事动画建议有限次氛围动画用无限animation-directionnormal/alternate控制回放方向alternate需配合偶数或infinite才能看出循环感animation-fill-modeforwards/both保持终态或同时保持延时前状态忘记设置时动画播完会跳回初始样式animation-play-staterunning/paused下游控制启停通常由JavaScript设置见第4章在写这段CSS的时候我还刻意把颜色值提到:root变量里。--night-sky、--dawn-sky、--dust-sky这三组色值决定了整场“千年”的气氛走向。调色时不需要翻到关键帧里一个个改直接改变量即可。这个细节在做源码交付时尤其重要因为使用源码的人大概率会问“颜色怎么换”“星星怎么能多点”变量就是给这些需求留的接口。4. 用JavaScript控制节奏滚动触发、播放暂停与主题切换4.1 IntersectionObserver滚动触发让每段剧情自己醒来如果只有自动播放的动画页面看第二遍就会腻。一个合格的叙事型源码必须允许用户滚动控制故事节奏——滚到哪一段哪一段的动效才激活。这是IntersectionObserver的典型应用场景它比传统的scroll事件监听性能好很多不需要在每次滚动时强制浏览器计算整页布局。const sections document.querySelectorAll(.story-section); const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting) { entry.target.classList.add(visible); } else { entry.target.classList.remove(visible); } }); }, { threshold: 0.4 }); sections.forEach((section) observer.observe(section));这段脚本的核心逻辑只有两步观察所有.story-section元素当某个元素有40%的面积进入视口时给它加上.visible类。第3章CSS里transition过渡正是等这个类出现才开始工作的——这也就是为什么我把文字入场做成transition而不是animation的关键原因动画的启动权完全交给JavaScript的观察结果而不是靠delay猜一个时间。threshold: 0.4这个参数我不建议照抄它要根据章节高度微调。如果每个章节都很高40%门槛意味着用户要滚很多才能触发如果章节内容较短0.2可能更跟手。用threshold数组[0, 0.25, 0.5, 1]可以在监视器里看到更细的触发进度但事件回调会变频繁常规页面用单值就够了。4.2 animation-play-state与animation-direction给用户一个上帝视角自动播放的页面还缺少一个控制感。我在“守候”章节里安排了一个“运转千年”按钮它的作用是让背景时间流逝动画暂停或继续。同时还有一个“回到初见”按钮让所有活跃的动画反方向播放。这两个功能对应两个CSS动画属性animation-play-state和animation-direction。const toggleBtn document.querySelector(#toggleTimeBtn); const reverseBtn document.querySelector(#reverseBtn); const sky document.querySelector(.sky); const stars document.querySelector(.starField); toggleBtn.addEventListener(click, () { const isPaused sky.style.animationPlayState paused; sky.style.animationPlayState isPaused ? running : paused; stars.style.animationPlayState isPaused ? running : paused; }); reverseBtn.addEventListener(click, () { const nextDirection sky.style.animationDirection reverse ? alternate : reverse; sky.style.animationDirection nextDirection; stars.style.animationDirection nextDirection; });注意我在reverseBtn的切换逻辑里将alternate和reverse互换。因为背景天空动画本身就是infinite alternate双向播放的如果直接把direction改成reverse它依然会在两色之间往返只是方向反了视觉上看不出区别。所以我需要做的是把alternate替换成reverse让动画从当前播放方向掉头。这里暴露了动画控制的一个共性问题在无限循环且反向交替的动画上做方向切换必须想清楚“最终要让观看者感知到什么”。如果是演示“时间回退”更合适的方式是切换animation-play-state再配合JavaScript把动画当前进度归零具体做法是读取getAnimations()得到的currentTime并手动修改。在现代浏览器里element.getAnimations()能拿到当前作用于元素上的所有动画对象每个对象暴露play()、pause()和currentTime这三个关键接口。这比直接读getComputedStyle更可靠也让我能直接设置动画时间点。// 把天空动画重置到第一帧并暂停用于章节切换时的状态复位 const resetAnimation (element) { const animations element.getAnimations(); animations.forEach((anim) { anim.pause(); anim.currentTime 0; }); };这是一个很实用的复位函数。场景是用户从“初见”直接跳转到底部“重逢”的锚点如果背景动画还停留在中途某个颜色故事氛围就不匹配。currentTime 0把动画拉回开始帧再pause()让它停在那个时刻。这与animation-fill-mode的backwards配合能避免复位时出现一帧白闪。4.3 CSS变量作为交互总控主题切换不必重写动画热词里有“css3动画执行次数和逆向播放”也有大量关于源码复用和网页设计作业的需求。“千年之恋”这个标题的源码我倾向于交付时留一个“氛围主题切换”能力。例如一个“夜晚/白昼”切换按钮本质上是把:root里的三个颜色变量替换掉。JavaScript只需要一行document.documentElement.style.setProperty(--night-sky, #1a2a44); document.documentElement.style.setProperty(--dawn-sky, #d8a48f); document.documentElement.style.setProperty(--dust-sky, #f3d9c7);因为.sky的background-color动画引用的是变量关键帧里的background-color值是动态解析的所以改变量后动画的起止颜色随之变化而动画本身的时长、缓动、循环次数完全不需要动。这个方法在把“千年之恋”改成“盛夏白昼”这类主题时非常高效——你只需要换变量不需要动任何关键帧代码。这个设计也解释了为什么我在第3章坚持把颜色都提取出来动画结构是行为层颜色是表现层。行为层要稳定表现层要灵活。在源码交付时这种做法能显著减少使用者改代码时误伤动画逻辑的风险。5. 在DevTools里验证动画曲线再把同一套动效模板移植到下一个页面这一类页面的动画数量通常在5个以上如果它们同时运行单靠肉眼很难判断是圆滑还是掉帧。我的做法是打开Chrome开发者工具切换到Performance面板录制10秒滚动操作然后盯着FPS曲线和GPU占用率看。如果时间轴上出现连续红条说明主线程太忙这时优先检查是否有属性动画误用了width、top、margin这类触发layout的属性将它们替换成transform和opacity能立刻见效。动画细节的验证则用Animations抽屉面板快捷键是DevTools中三个点菜单里选“更多工具”再选“动画”。打开后能看到所有animation和transition的时间线、曲线和暂停按钮。我会重点检查每个关键帧的缓动曲线星空闪烁的透明度变化适合ease-in-out文字上移适合cubic-bezier(0.2, 0.8, 0.4, 1)前者柔和后者有轻微的弹入感但不过分。验证结束后我会做一次模板抽取。把第3章CSS里的关键帧命名从day-and-night、twinkle这种语义名替换成通用名比如bg-flow、particle-breathe再从:root变量里把主色抽象成--primary-hue和--primary-saturation。这样做的目的是让源码变成一个可填空模板下一篇文章想要“四季之书”主题只需重新填四个主色变量、替换style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;" />