免费的HTML和CSS时间轴代码示例集合：响应式，简单，垂直，水平等。2019年4月更新，12个新项目。
目录
垂直时间线
时间轴UI设计
作者：bberameric，时间：2020 年 11 月 2 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome、Edge、Firefox、Opera、Safari
响应：否
依赖项：–
演示/代码：↓
See the Pen
Timeline UI Design by bberameric (@bbera)
on CodePen.
响应式网格时间轴
作者：Shireen，时间：2020 年 7 月 31 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：–
演示/代码：↓
See the Pen
Responsive Grid Timeline | Dribble shot by Shireen Taj (@TajShireen)
on CodePen.
时间线
一种使用伪元素来自定义无序列表的简单方法。列表装饰可以是任何东西 – 甚至是图像。
作者：Shireen，时间：2020 年 7 月 9 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：–
演示/代码：↓
See the Pen
Timeline by Shireen Taj (@TajShireen)
on CodePen.
超级简单的时间线
超级简单的垂直时间线代码，用于创建垂直时间线。
作者：HTML Codex，时间：2020 年 6 月 26 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：font-awesome.css
演示/代码：↓
See the Pen
Super Simple Timeline by HTML Codex (@htmlcodex)
on CodePen.
垂直时间表 – 通知
作者：Alina N.，时间：2020 年 5 月 2 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：font-awesome.css
演示/代码：↓
See the Pen
Vertical Timeline – Notifications by Alina N. (@blackellis)
on CodePen.
UIKIT 3 CSS 时间轴
作者：Corentin，时间：2020 年 4 月 24 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：uikit.css
演示/代码：↓
See the Pen
UIkit 3 CSS Timeline by Corentin (@Astroop)
on CodePen.
垂直黑暗时间线
作者：Devcrud，时间：2020 年 4 月 24 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：font-awesome.css
演示/代码：↓
See the Pen
Vertical dark timeline by Devcrud (@Devcrud)
on CodePen.
HTML时间线
获取有序列表并使其成为响应时间线。
作者：Vaughan Curd，时间：2019 年 9 月 24 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline of HTML by Vaughan Curd (@vcurd)
on CodePen.
CSS 时间轴多用途
作者：Aslam，时间：2019 年 8 月 22 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：lineicons.css, animate.css
演示/代码：↓
See the Pen
CSS Timeline Multi by Aslam (@hunzaboy)
on CodePen.
CSS 时间轴
作者：Aslam，时间：2019 年 8 月 16 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：lineicons.css, animate.css
演示/代码：↓
See the Pen
CSS Timeline by Aslam (@hunzaboy)
on CodePen.
时间线
基于渐变边框的时间轴自定义计数器。
作者：Lauren Chilcote，时间：2018 年 10 月 27 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline Custom Counter with Gradient Border by Lauren Chilcote (@letsbleachthis)
on CodePen.
响应时间线概念
客户生理周期或特定合同生理周期的小时间线概念。
作者：Jones Joseph，时间：2018 年 9 月 20 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：bootstrap.css, font-awesome.css
演示/代码：↓
See the Pen
Responsive Timeline Concept by Jones Joseph (@jo_Geek)
on CodePen.
时间线 CSS
简单的虚线时间线 CSS。
作者：Jonathan Snook，时间：2018 年 5 月 10 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline CSS by Jonathan Snook (@snookca)
on CodePen.
滚动时间线
垂直滚动时间轴。
作者：Victor Lebedev，时间：2018 年 2 月 18 日
构建：HTML/Pug，CSS/SCSS，JavaScript/Babel (jquery.js)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Scroll Timeline (jQuery) by Viktor (@viktorjs)
on CodePen.
CSS 时间轴
基于“Saira”和“Chivo”字体的 CSS 时间线。
作者：Alan Houser，时间：2018 年 1 月 24 日
构建：HTML / CSS (Less)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS Timeline for Giggles by Alan Houser (@alanhouser)
on CodePen.
CSS 垂直时间轴
从左到右的垂直时间线。完全响应。使用引导程序。
作者：CP Lepag，时间：2018 年 1 月 24 日
构建：HTML (Pug) / CSS (Sass)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Vertical Left and Right Timeline by CP Lepage (@cplepage)
on CodePen.
CSS 时间线
具有自定义属性的 CSS 时间线。
作者：Stas Melnikov，时间：2017 年 9 月 30 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS Timeline with Custom Properties by Stas Melnikov (@melnik909)
on CodePen.
简单的响应时间线
HTML 和 CSS 中简单的响应式垂直时间线布局。
作者：Keith Wyland，时间：2017 年 9 月 1 日
构建：HTML / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Simple Responsive Timeline by keith.geek (@keithwyland)
on CodePen.
响应式滑块时间轴
使用Swiper JS库制作的响应式滑块时间轴。
作者：Bruno Carvalho，时间：2017 年 8 月 30 日
构建：HTML/Pug，CSS/SCSS，JavaScript (swiper.js)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Responsive slider timeline with Swiper by Bruno Carvalho (@bcarvalho)
on CodePen.
使用 CSS 网格创建的时间轴
使用 CSS 网格创建的响应时间线。不支持 CSS 网格的浏览器将获得时间轴的移动版本。
作者：Dianna Cheng，时间：2017 年 7 月 15 日
构建：HTML (Pug) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Responsive Timeline using CSS Grid & Grid Template Areas( Pug, Sass, Description List) by Dianna Cheng (@girlgeek)
on CodePen.
高级时间线
使用 CSS 网格创建的响应时间线。不支持 CSS 网格的浏览器将获得时间轴的移动版本。
作者：MO7AMED，时间：2017 年 6 月 6 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Advanced TimeLine : HTML / CSS / JavaScript by MO7AMED EL DMRDASH (@mo7amedk7alid29)
on CodePen.
使用 Flexbox 的基于固定标题的时间线
使用 flexbox 具有固定标题的 HTML 和 CSS 时间线。
作者：Matys，时间：2017 年 5 月 29 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Bitcoin timeline with fixed header using flexbox by Matys (@mathiesjanssen)
on CodePen.
项目时间线
HTML 和 CSS 中的项目时间线。
作者：Russell Bishop，时间：2017 年 2 月 19 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Project Timeline by Russell Bishop (@russelllighthouse)
on CodePen.
时间线
HTML、CSS 和 JavaScript 时间线。
作者：Mert Nerukuc，时间：2017 年 2 月 6 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
timeline by Mert Cukuren (@knyttneve)
on CodePen.
超回路时间线
基于HTML和CSS的Hyperloop时间线。
作者：Théo Vidal，时间：2017 年 1 月 29 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Hyperloop Timeline by Théo Vidal (@theovidal)
on CodePen.
垂直时间轴
基于时间间隔的 CSS 垂直时间线。
作者：Andres，时间：2017 年 1 月 25 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS V-timeline w/ time intervals (by Frontend Tips) by Andres (@Fahrek)
on CodePen.
Flexbox 时间线布局
基于列的 flexbox 时间线布局。目标是在创建（有点复杂）时间轴外观的布局时使用干净的语义HTML。
作者：Paul Barker，时间：2017 年 1 月 16 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Flexbox Timeline Layout by Paul Barker (@paulhbarker)
on CodePen.
单个 Div 时间轴
HTML 和 CSS 中的单个 div 时间线。
作者：Niels Voogt，时间：2016 年 12 月 28 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Single div timeline by Niels Voogt (@NielsVoogt)
on CodePen.
CSS 时间线
HTML 和 CSS 时间线。
作者：Rafael Youakeem，时间：2016 年 12 月 26 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS Timeline by Rafael Youakeem (@Youakeem)
on CodePen.
垂直时间轴
HTML 和 CSS 时间轴。
作者：Atticus Koya，时间：2016年12月22日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline by Zed Dash (@z-)
on CodePen.
时间线
使用伪元素创建的垂直和水平线的 CSS 时间线示例。
作者：Nomisoft，时间：2016 年 12 月 7 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline by Nomisoft (@nomisoft)
on CodePen.
评论、反馈和历史时间表
双面评论时间线 tweenmax。
作者：Hosam Elnabawy，时间：2016 年 11 月 28 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
comments & feeadbacks & history timeline by Hosam Elnabawy (@hosam1696)
on CodePen.
UI设计早晨时间表
基于HTML和CSS的早晨时间表。
作者：Hưng Nguyễn，时间：2016年 9 月 17 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
[UI DESIGN] Morning timeline ! by Hưng Nguyễn (@ZeroX-DG)
on CodePen.
时间轴
基于 HTML 和 CSS 的时间轴。
作者：Kelsey Santangelo，时间：2016 年 11 月 14 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline by Kelsey Santangelo (@ksantangelo)
on CodePen.
Timeline UI
出于培训目的原始设计的运球草图的 CSS 实现。
作者：Simon Reinsperger，时间：2016 年 9 月 13 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline UI by Simon Reinsperger (@abisz)
on CodePen.
简单的响应时间线
HTML 和 CSS 中的简单响应时间线。
作者：Brady Wright，时间：2016 年 9 月 8 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Simple Responsive Timeline by Brady Wright (@brady_wright)
on CodePen.
垂直时间轴
基于 HTML、CSS 和 JavaScript 的垂直时间线。
作者：Sava Lazic，时间：2016 年 9 月 4 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Vertical Timeline by Sava Lazic (@savalazic)
on CodePen.
响应时间线
基于 HTML、CSS 和 JavaScript 的响应式时间轴。
作者：Arnaud Balland，时间：2016 年 8 月 25 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Responsive Timeline by Arnaud Balland (@ArnaudBalland)
on CodePen.
垂直时间轴
基于 HTML 和 CSS 的时间轴。
作者：Yago Gonzalez，时间：2016 年 8 月 23 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
YGC V2 Timeline by Yago Gonzalez (@ygc)
on CodePen.
漂亮时间轴
HTML 和 CSS 漂亮的时间轴。
作者：Evan Wieland，时间：2016 年 7 月 14 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Pretty Timeline by Evan Wieland (@EvanWieland)
on CodePen.
CSS Timeline
基于 HTML 和 CSS 的 CSS 时间线。
作者：Tristan White，时间：2016 年 7 月 10 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS Timeline v2 by Tristan White (@triss90)
on CodePen.
Timeline
基于 HTML、CSS 和 JavaScript 的时间轴。
作者：radhika prajapati，时间：2016 年 7 月 6 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline by radhika prajapati (@rprajapatii)
on CodePen.
使用 CSS 的垂直时间线
使用 CSS 和一点 JavaScript 构建垂直时间线。
作者：Envato Tuts+，时间：2016 年 5 月 24 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Building a Vertical Timeline With CSS and a Touch of JavaScript by Envato Tuts+ (@tutsplus)
on CodePen.
Timeline
基于 HTML 和 CSS 的个人项目的时间表。
作者：Bruno Rodrigues，时间：2016 年 4 月 3 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline by Bruno Rodrigues (@itbruno)
on CodePen.
可折叠的时间表
基于 HTML、CSS 和 JavaScript 的可折叠时间线。
作者：Barney Parker，时间：2015 年 11 月 26 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Collapsable timeline by Barney Parker (@barney-parker)
on CodePen.
CSS3 时间线
完全响应式移动优先 CSS 时间线。
作者：Krishna Babu，时间：2015 年 11 月 24 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS3 Timeline by Krishna Babu (@krishnab)
on CodePen.
动画 SVG 旅行时间轴
基于 HTML、CSS 和 SVG 的动画旅行时间线。
作者：Vince Brown，时间：2015 年 7 月 29 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Animated SVG Travel Timeline by Vince Brown (@vincebrown)
on CodePen.
Vertical Timeline
纯 CSS 垂直时间线。
作者：Darcy Voutt，时间：2015 年 3 月 11 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS Timeline by Darcy Voutt (@darcyvoutt)
on CodePen.
时间轴动画
只是摆弄一个简单的动画时间轴。
作者：Chris Wright，时间：2015 年 2 月 12 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline animation by Chris Wright (@chriswrightdesign)
on CodePen.
狭窄的垂直时间线
制作狭窄版本的时间轴插件以适合移动屏幕。
作者：Tyler Berry，时间：2015 年 2 月 3 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Narrow Vertical Timelinr by Tyler Berry (@TylerBerry)
on CodePen.
作品组合时间线
受到 http://kohlhofer.com/ 启发的时间线，专为作品组合页面构建。
作者：Andrew R McHugh，时间：2015 年 2 月 1 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline for a Portfolio by Andrew R McHugh (@armthethinker)
on CodePen.
响应式垂直时间线
HTML 和 CSS 响应式垂直时间线。
作者：Ratko Solaja，时间：2014 年 9 月 26 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Responsive Vertical Timeline by Ratko Solaja (@Ratko_Solaja)
on CodePen.
垂直时间轴
易于定制、响应迅速的时间线。使用了一些 CSS3 技巧和一些 jQuery 来创建一些仅影响桌面用户的弹跳动画，而在移动设备上则结构更小。
作者：CodyHouse，时间：2014 年 6 月 12 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Vertical Timeline by CodyHouse (@codyhouse)
on CodePen.
时间线涂鸦
HTML 和 CSS 时间线涂鸦。
作者：Michaela，时间：2014 年 4 月 20 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline scribble by Michaela (@Fischaela)
on CodePen.
Vertical Timeline
HTML 和 CSS 时间线。
作者：Ross McNeil，时间：2014 年 1 月 7 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Timeline by Ross Topping (@rosstopping)
on CodePen.
CSS Timeline
完全响应的 CSS 时间线。
作者：Nils Wittler，时间：2013 年 9 月 19 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS Timeline by Nils Wittler (@NilsWe)
on CodePen.
CSS3 Timeline
请将$vertical变量设置为false以查看水平版本。
作者：Peiwen Lu，时间：2013 年 5 月 19 日
构建：HTML / CSS / JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
CSS3 Timeline by Peiwen Lu (@P233)
on CodePen.
水平时间线
调整延时摄影
请将$vertical变量设置为false以查看水平版本。
作者：M4TJOE，时间：2020 年 4 月 14 日
构建：HTML / CSS
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Resize Timelapse by M4TJOE (@M4TJOE)
on CodePen.
响应时间线 V3
桌面上的时间轴，可切换到移动设备上的可点击圈子。单击圆圈时，内容会发生变化。
作者：Clay Larson，时间：2018 年 1 月 28 日
构建：HTML，CSS/Sass，JavaScript (jquery.js)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
responsive timeline v3 by Clay Larson (@cjl750)
on CodePen.
嵌套和颜色时间轴
嵌套和颜色编码的交互式时间轴。
作者：demonwhite，时间：2017 年 12 月 4 日
构建：HTML，CSS/Sass，JavaScript/TypeScript (jquery.js)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Nested & Color Coded Interactive Timeline by Kent Chang (@kentchangdesign)
on CodePen.
响应式历史时间表
横向响应历史时间线。
作者：Dejan Babić，时间：2017 年 10 月 12 日
构建：HTML，CSS/Sass，JavaScript (jquery.js, slick.js)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
Responsive history timeline by Dejan Babić (@microfront)
on CodePen.
小组时间线
横向小组时间线。
作者：Abhishek Raj，时间：2017 年 10 月 3 日
构建：HTML，CSS/Sass，JavaScript (jquery.js, slick.js)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：是
依赖项：
演示/代码：↓
See the Pen
PS Group Timeline 2 by Abhishek Raj (@abhishekraj)
on CodePen.
仅CSS命令的处理步骤
这里只是一个不错的流程栏，你可以在其中单击不同的步骤并显示信息。顶部的框也将根据步骤设置动画。
作者：Jamie Coulter，时间：2017 年 8 月 9 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
CSS only order process steps by Jamie Coulter (@jcoulterdesign)
on CodePen.
水平时间轴
使用 CSS 和 JavaScript 的水平时间线。
作者：Envato Tuts+，时间：2017 年 4 月 27 日
构建：HTML (Haml) / CSS，JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
Building a Horizontal Timeline With CSS and JavaScript by Envato Tuts+ (@tutsplus)
on CodePen.
水平时间轴
基于slick.js滑块的HTML和CSS时间轴。
作者：cenda，时间：2017 年 4 月 10 日
构建：HTML (Haml) / CSS，JavaScript(slick.js)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
timeline by cenda (@cenda)
on CodePen.
4 面板时间线 CSS
客户的 CSS 唯一时间表。移动样式即将推出。
作者：Jeff Glenn，时间：2016 年 12 月 22 日
构建：HTML (Haml) / CSS，JavaScript
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
4 Panel Timeline CSS by Jeff Glenn (@jeffglenn)
on CodePen.
时间轴顺序V1
基于 HTML、CSS 和 JavaScript 的时间轴。
作者：Youssef，时间：2016 年 6 月 8 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
Timeline Sequence V1 by Youssef (@xander1820)
on CodePen.
水平时间线模型
基于 HTML、CSS 和 JavaScript 的水平时间线。
作者：Xin YAO，时间：2016 年 2 月 18 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
Horizontal timeline mockup v2 by Xin YAO (@TriVector)
on CodePen.
HR时间轴
HTML 和 CSS 时间线。
作者：Youri，时间：2016 年 2 月 17 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
HR Timeline by Youri (@yourinium)
on CodePen.
受 Codyhouse 启发的水平时间线
这是一个水平时间线，将与不超过 5 个日期的动态集合一起使用。
作者：Adam Kimmerer，时间：2016 年 2 月 9 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
Horizontal Timeline Inspired by Codyhouse by Adam Kimmerer (@AdamKimmerer)
on CodePen.
Horizontal Timeline
基于 HTML、CSS 和 JavaScript 的水平时间线。
作者：Ritesh Kumar，时间：2015 年 12 月 24 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
horizontal timeline by Ritesh Kumar (@ritz078)
on CodePen.
Horizontal Timeline
基于 HTML、CSS 和 JavaScript 的水平时间线。
作者：Alberto，时间：2015 年 7 月 6 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
qdxKMo by Alberto (@Naasa21)
on CodePen.
Timeline
使用 HTML 和 CSS 的简单时间线抽象。
作者：Abhi Sharma，时间：2014 年 12 月 23 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
Timeline by Abhi Sharma (@abhisharma2)
on CodePen.
动画圆圈时间轴
基于动画项目的时间轴出现在相应时间段的悬停上。
作者：Jen Huang，时间：2014 年 12 月 11 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
Animated circle timeline by Jen Huang (@jen-huang)
on CodePen.
Horizontal Timeline
HTML、CSS 和 JavaScript 水平时间线。
作者：Elton Mesquita，时间：2014 年 8 月 29 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
DcHup by Elton Mesquita (@eltonmesquita)
on CodePen.
水平时间轴
基于 HTML 和 CSS 的时间轴。
作者：Clint Brown，时间：2013 年 9 月 30 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
Timeline by Clint Brown (@clintabrown)
on CodePen.
CSS3 水平时间线
HTML 和 CSS3 水平时间线。
作者：Peiwen Lu，时间：2013 年 5 月 17 日
构建：HTML (Haml) / CSS (SCSS)
兼容浏览器：Chrome, Edge, Firefox, Opera, Safari
响应：否
依赖项：
演示/代码：↓
See the Pen
CSS3 Horizontal Timeline by Peiwen Lu (@P233)
on CodePen.
