简介这是一份面向前端开发者与网页设计学习者的HTML5时间轴源码合集聚焦于序列事件的交互式可视化呈现适用于新闻报道、项目管理、历史事件展示等需要清晰表达时间顺序的场景。资源包共97个文件以37个html页面、20个css样式表、11个js脚本为主另含15个md说明文档及png、svg、字体等配套素材压缩包约637KB结构轻量便于快速查阅与二次开发。内容涵盖纵向与横向两种布局纵向时间轴自上而下展开适合空间有限或强调时间顺序的场合横向时间轴沿X轴排列便于展现较长跨度。源码中运用伪元素绘制轴线与节点结合事件监听实现滚动动画、点击展开等交互并借助data-*属性与time元素提升语义化。目前已有538人学习下载读者可据此掌握时间轴的核心实现思路按需定制图标、配色主题或与主流前端框架集成。1. 35 种 HTML5 时间轴源码从“找轮子”到“改轮子”的落地路径做前端或者全栈的朋友大概率都遇到过这种需求产品经理要一个“发展历程”页面运营要一个“项目里程碑”展示或者后台系统里需要一个“操作日志”的可视化时间线。第一反应是去搜“时间轴 timeline 组件”结果要么是 React/Vue 专用库要么样式丑得没法直接用要么文档写得像天书。这时候如果手里有一份能直接跑、能拆开改的 HTML5 时间轴源码合集效率完全不一样。这次拆的这份资源就是 35 种基于原生 HTML5 CSS3 JavaScript 实现的时间轴效果覆盖垂直、水平、响应式、滚动触发、卡片式、极简线条等多种形态。它适合谁适合不想被框架绑架、需要快速出原型、或者想研究 CSS 布局与滚动动画实现细节的开发者。下面我按“怎么选、怎么跑、怎么改、坑在哪”的顺序把这份源码包的实际使用路径捋一遍。2. 先搞懂时间轴的三种实现流派选错结构后面全是返工拿到 35 个文件夹别急着一个个打开看。时间轴看着简单但底层实现思路差异很大选错了后面改样式会非常痛苦。我一般先把它们分成三类纯 CSS 定位流、JavaScript 动态渲染流、滚动监听动画流。这三类没有绝对好坏但对应不同的业务场景和维护成本。2.1 纯 CSS 定位流适合静态展示改起来最快这类时间轴的核心逻辑是用position: relative做容器::before或::after画中轴线每个节点用position: absolute或者 flex 布局排列。优点是零依赖、打开就能跑、改颜色改间距直接调 CSS 变量。缺点是节点数量多了之后垂直居中对齐容易出玄学问题尤其是左右交替布局那种。常见做法是给容器设一个固定宽度中轴线用伪元素画在left: 50%位置然后奇数节点left: 0偶数节点left: 50%。但这里有个坑如果节点内容高度不一致中轴线会断。解决办法是把中轴线画在父容器上而不是每个节点上。下面这段是这类源码里最典型的骨架!-- 纯 CSS 垂直时间轴骨架 -- div classtimeline div classtimeline-item div classtimeline-dot/div div classtimeline-content h32024-01 项目启动/h3 p完成需求评审与技术选型/p /div /div !-- 更多 item 重复 -- /div/* 中轴线画在容器上避免节点高度不一致导致断裂 */ .timeline { position: relative; padding: 40px 0; } .timeline::before { content: ; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #e0e0e0; transform: translateX(-50%); /* 关键让线真正居中 */ } .timeline-item { position: relative; width: 50%; padding: 20px 40px; box-sizing: border-box; } .timeline-item:nth-child(odd) { left: 0; text-align: right; } .timeline-item:nth-child(even) { left: 50%; } .timeline-dot { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #1e88e5; top: 28px; }逻辑说明transform: translateX(-50%)是让 2px 宽的线真正居中的关键少了这行线会偏右 1px在高分屏上肉眼可见。box-sizing: border-box保证 padding 不会撑破 50% 宽度。奇数节点右对齐、偶数节点左对齐形成交替效果。参数怎么改中轴线颜色改background节点圆点大小改width/height间距改padding。如果要做成单侧时间轴把所有left: 50%改成left: 20px去掉nth-child的左右交替规则即可。2.2 JavaScript 动态渲染流适合数据驱动但要注意 XSS这类源码通常提供一个data数组用forEach或者map生成 DOM。优点是接后端接口方便改数据不用动 HTML。缺点是如果直接拼字符串插入innerHTML用户输入的内容会带来 XSS 风险。我一般会要求用textContent或者转义函数处理。// 动态渲染时间轴节点 const timelineData [ { date: 2024-01, title: 项目启动, desc: 完成需求评审 }, { date: 2024-03, title: 第一版上线, desc: 核心功能可用 } ]; const container document.querySelector(.timeline); timelineData.forEach(item { const el document.createElement(div); el.className timeline-item; const dateEl document.createElement(span); dateEl.className timeline-date; dateEl.textContent item.date; // 不用 innerHTML避免 XSS const titleEl document.createElement(h3); titleEl.textContent item.title; const descEl document.createElement(p); descEl.textContent item.desc; el.append(dateEl, titleEl, descEl); container.appendChild(el); });逻辑说明用createElementtextContent而不是模板字符串拼innerHTML是为了防止数据里带script标签。如果数据完全可控比如写死的配置用innerHTML性能更好但一旦接后端就要改回来。参数说明timelineData的字段名要和后端对齐常见做法是让后端返回{ date, title, desc }结构前端只做映射。如果后端字段是create_time、event_name在forEach里做一层转换即可。2.3 滚动监听动画流视觉效果最好但性能最容易翻车这类时间轴用IntersectionObserver或者scroll事件监听节点进入视口时触发淡入、滑入动画。35 个源码里有不少是这种视觉冲击力强适合官网发展历程页。但坑也最多用scroll事件不做节流页面滚动会卡成 PPT用IntersectionObserver不设rootMargin动画触发时机要么太早要么太晚。// 用 IntersectionObserver 做滚动触发比 scroll 事件性能好 const observer new IntersectionObserver((entries) { entries.forEach(entry { if (entry.isIntersecting) { entry.target.classList.add(visible); observer.unobserve(entry.target); // 触发一次后停止观察省性能 } }); }, { threshold: 0.2, // 节点露出 20% 就触发 rootMargin: 0px 0px -50px 0px // 底部提前 50px 触发避免动画被截断 }); document.querySelectorAll(.timeline-item).forEach(el { observer.observe(el); });逻辑说明threshold: 0.2表示节点 20% 进入视口就触发数值越小触发越早。rootMargin底部负值让触发点提前避免用户看到节点时动画还没开始。unobserve是关键动画只跑一次不然后续滚动会反复触发。参数怎么改想要更灵敏就把threshold调到 0.1想要更迟钝就调到 0.5。rootMargin的负值越大触发越早。3. 把源码跑起来本地预览、目录结构与依赖排查选好流派之后下一步是把源码在本地跑通。35 个文件夹不可能每个都配一套构建工具我一般先看目录结构再决定用哪种方式预览。3.1 目录结构速判一眼看出能不能直接双击打开拿到源码包先看根目录有没有package.json、vite.config.js、webpack.config.js这类文件。如果没有大概率是纯静态 HTML直接双击index.html就能跑。如果有package.json再看scripts里有没有dev或start有的话走npm install npm run dev。常见目录结构有两种结构类型特征预览方式注意事项纯静态只有 .html/.css/.js双击 index.html部分浏览器限制本地文件跨域建议起本地服务构建型有 package.jsonnpm install 后跑 dev注意 Node 版本老项目可能锁死 Node 14我一般会先起一个本地静态服务而不是直接双击。因为有些源码用了fetch加载 JSON 数据file://协议下会被 CORS 拦截。用 Python 一行命令就能起# 在源码根目录执行起一个 8080 端口的静态服务 python3 -m http.server 8080 # 然后浏览器打开 http://localhost:8080逻辑说明http.server是 Python 标准库自带的不用装任何东西。端口被占用就换 8081。如果电脑上没有 Python用npx serve也行但需要 Node 环境。这一步的目的是让页面走http://协议避免file://下的跨域限制。3.2 依赖排查老源码最常见的三个报错35 个源码里难免有几个是几年前写的依赖版本对不上。我遇到最多的三个报错第一个是npm install卡在node-sass编译。原因是node-sass和当前 Node 版本不兼容。解决办法是换成sassDart Sass或者用nvm切到 Node 14。如果只是看效果直接把node-sass从package.json里删掉看 CSS 是不是预编译好的是的话不影响。第二个是Uncaught ReferenceError: $ is not defined。说明源码用了 jQuery 但没引入或者引入顺序错了。检查script标签jQuery 必须在业务代码之前。如果是 npm 项目确认jquery在dependencies里并且import了。第三个是滚动动画不触发。打开控制台看有没有IntersectionObserver is not defined。这个 API 在旧版浏览器不支持但现代浏览器都没问题。如果报错说明源码里用了 polyfill 但没引入或者你用的浏览器太老。换 Chrome 最新版基本能解决。提示跑源码之前先看README哪怕只有一行字。有些作者会写“需要 Node 16”能省掉很多试错时间。3.3 快速对比 35 个效果用 iframe 做一个索引页35 个文件夹一个个点开太慢。我一般会写一个简单的索引页用iframe把所有index.html嵌进来一屏对比。!-- 放在源码根目录快速预览所有时间轴效果 -- !DOCTYPE html html head meta charsetutf-8 title时间轴源码索引/title style body { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: 16px; } iframe { width: 100%; height: 400px; border: 1px solid #ddd; } .item { display: flex; flex-direction: column; } .item span { font-size: 12px; color: #666; margin-bottom: 4px; } /style /head body !-- 手动列出所有文件夹或者用 JS 生成 -- div classitem span01-垂直交替/span iframe src./01-vertical-alternate/index.html/iframe /div div classitem span02-水平滚动/span iframe src./02-horizontal-scroll/index.html/iframe /div !-- 更多 iframe 按文件夹名补充 -- /body /html逻辑说明iframe加载本地 HTML 不受跨域限制同源策略对file://下的 iframe 有时会拦截所以还是建议走http://localhost:8080。grid布局三列一屏能看 6 个左右。参数怎么改grid-template-columns改成repeat(2, 1fr)就是两列适合屏幕小的笔记本。height根据时间轴长度调整太短会出滚动条。4. 改造实战把选中源码接进真实项目跑通之后真正的活是改造。35 个源码不可能直接用在项目里颜色、字体、间距、响应式都要调。这一章按“换数据、改样式、做响应式”三步走。4.1 数据对接从写死 HTML 到接口驱动大部分源码的节点是写死在 HTML 里的。接真实项目时第一步是把写死的节点抽成数据用 JS 渲染。如果源码本身是纯 CSS 定位流没有 JS 渲染逻辑就手动加一段。// 把写死的 HTML 节点替换成接口数据渲染 async function loadTimeline() { const res await fetch(/api/timeline/list); const data await res.json(); const container document.querySelector(.timeline); container.innerHTML ; // 清空写死的节点 data.forEach((item, index) { const el document.createElement(div); el.className timeline-item ${index % 2 0 ? left : right}; el.innerHTML div classtimeline-dot/div div classtimeline-content h3${escapeHtml(item.title)}/h3 p${escapeHtml(item.desc)}/p time${escapeHtml(item.date)}/time /div ; container.appendChild(el); }); } // 简单的转义函数防止 XSS function escapeHtml(str) { const div document.createElement(div); div.textContent str; return div.innerHTML; } loadTimeline();逻辑说明index % 2 0用来生成左右交替的 class替代原来nth-child的写法因为动态渲染后nth-child依然有效但显式加 class 更可控。escapeHtml是必须的接口数据不可信。参数说明接口返回的字段名如果和源码不一致在forEach里做映射比如item.create_time改成item.date。分页加载的话把forEach改成增量append不要每次清空容器。4.2 样式覆盖用 CSS 变量统一改色别直接改源码35 个源码各有各的配色直接改每个选择器很累。我一般先在:root里定义一套变量然后把源码里的颜色值替换成变量引用。/* 在源码 CSS 最前面加变量定义 */ :root { --timeline-line-color: #d0d0d0; --timeline-dot-color: #1e88e5; --timeline-dot-size: 12px; --timeline-content-bg: #ffffff; --timeline-content-shadow: 0 2px 8px rgba(0,0,0,0.08); --timeline-gap: 40px; } /* 然后把源码里的 #e0e0e0 改成 var(--timeline-line-color) */ .timeline::before { background: var(--timeline-line-color); } .timeline-dot { width: var(--timeline-dot-size); height: var(--timeline-dot-size); background: var(--timeline-dot-color); } .timeline-content { background: var(--timeline-content-bg); box-shadow: var(--timeline-content-shadow); }逻辑说明CSS 变量在:root定义后全局可用改主题色只需要改一个地方。如果源码里颜色值出现多次用编辑器的“全部替换”把硬编码颜色换成var(...)。参数怎么改--timeline-gap控制节点间距--timeline-dot-size控制圆点大小。注意有些源码用了!important变量可能不生效需要把!important去掉或者提高选择器优先级。4.3 响应式适配移动端把左右交替改成单侧左右交替的时间轴在桌面端好看但在手机窄屏上会挤成一团。常见做法是在768px以下把中轴线移到左侧所有节点变成单侧排列。/* 移动端适配中轴线左移节点单侧排列 */ media (max-width: 768px) { .timeline::before { left: 20px; /* 中轴线靠左 */ transform: none; /* 去掉居中偏移 */ } .timeline-item { width: 100%; left: 0 !important; /* 覆盖桌面端的 left: 50% */ text-align: left !important; padding-left: 50px; /* 给中轴线和圆点留空间 */ } .timeline-dot { left: 14px; /* 圆点对齐中轴线 */ } }逻辑说明left: 0 !important是为了覆盖桌面端nth-child(even)的left: 50%因为媒体查询里的选择器优先级不一定比nth-child高加!important最省事。padding-left: 50px保证内容不被中轴线压住。参数怎么改断点768px可以按项目实际调整平板竖屏一般用1024px。left: 20px和padding-left: 50px要配合调圆点位置 中轴线位置 - 圆点半径。5. 避坑与排查这 5 个问题我几乎每次都会遇到时间轴源码看着简单但实际改造过程中有几个坑非常典型。下面按“现象 → 原因 → 解决”列出来都是血泪经验。5.1 中轴线在 Safari 上偏移 1px现象Chrome 里中轴线居中Safari 里偏左或偏右 1px。原因Safari 对transform: translateX(-50%)的亚像素渲染和 Chrome 不一致尤其是奇数宽度时。解决把中轴线宽度改成偶数比如 2px 改成 4px或者用left: calc(50% - 1px)替代transform。我一般直接用calc兼容性更稳。5.2 滚动动画在移动端不触发现象桌面端滚动正常淡入手机上一部分节点始终不显示。原因移动端浏览器地址栏收起/展开会改变视口高度IntersectionObserver的threshold计算受影响。解决把threshold调低到 0.1并且加rootMargin: 0px 0px -20px 0px。另外确认没有在observer回调里做重排操作移动端性能弱重排会导致观察失效。5.3 节点内容过长导致中轴线断裂现象某个节点描述文字特别多高度撑开后中轴线在它旁边断了一截。原因中轴线画在容器上但节点用了position: absolute或者float脱离了文档流容器高度没算进去。解决把节点改成position: relative让容器高度由内容撑开。如果必须用绝对定位给容器设一个min-height或者用 JS 动态计算容器高度。5.4 动态渲染后左右交替失效现象写死 HTML 时左右交替正常改成 JS 渲染后所有节点都挤在一边。原因源码用的是.timeline-item:nth-child(odd)选择器动态渲染后nth-child依然有效但如果渲染时插入了其他元素比如 loading 占位nth-child的计数就乱了。解决渲染时显式加left/rightclass不要依赖nth-child。或者确保容器里只有timeline-item一种子元素。5.5 时间轴节点过多导致页面卡顿现象节点超过 50 个后滚动明显掉帧。原因每个节点都有box-shadow和transition大量合成层叠加消耗 GPU。解决给节点加will-change: transform要谨慎用多了反而更卡。更好的做法是只给进入视口的节点加动画 class离开视口后移除。或者用虚拟滚动只渲染可视区域内的节点。如果节点是静态的把transition去掉只保留IntersectionObserver的淡入。注意改源码之前先备份一份原始文件。我吃过亏改到一半发现还是原来的效果好结果回不去了。6. 进阶技巧用 CSSscroll-driven animations替代 JS 滚动监听如果你用的浏览器比较新Chrome 115可以试试 CSS 原生的滚动驱动动画直接干掉IntersectionObserver。这是我在最近一个项目里替换掉 JS 监听的做法代码量少一半性能还更好。/* 用 CSS 滚动驱动动画替代 JS 监听 */ keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .timeline-item { animation: fadeIn linear both; animation-timeline: view(); /* 关键绑定到视口滚动 */ animation-range: entry 0% entry 50%; /* 进入视口 0% 到 50% 之间完成动画 */ }逻辑说明animation-timeline: view()让动画进度跟随元素在视口中的位置变化不需要任何 JS。animation-range: entry 0% entry 50%表示元素开始进入视口时动画开始进入 50% 时动画结束。参数怎么改entry 0% entry 100%会让动画贯穿整个进入过程更慢。cover替代entry则包含元素离开视口的过程。这个方案目前兼容性有限Safari 和 Firefox 还没完全支持所以生产环境要加supports判断不支持的浏览器回退到IntersectionObserver。/* 回退方案不支持滚动驱动动画时用 JS 方案 */ supports not (animation-timeline: view()) { .timeline-item { opacity: 0; transform: translateY(20px); transition: opacity 0.6s, transform 0.6s; } .timeline-item.visible { opacity: 1; transform: translateY(0); } }逻辑说明supports not检测浏览器是否支持animation-timeline不支持就应用传统方案。这样新浏览器走 CSS 原生老浏览器走 JS两边都不耽误。我一般会在项目里同时保留两套上线后看数据决定什么时候删掉 JS 那套。从那以后我每次拿到这类源码包都强制先跑一遍索引页把 35 个效果快速过一遍再选型不再一个个点开试。希望帮到你。本文还有配套的精品资源点击获取