滑动继续阅读»
【阿里云感恩回馈,云产品冰点价】最高31%返现 • 云服务器96.00元/年 • 产品低至1.3折
莫比水阻划船机家用健身器材静音划船器折叠智能纸牌屋运动划桨机

免费的HTML和CSS时间轴代码示例集合:响应式,简单,垂直,水平等。2019年4月更新,12个新项目

目录

  1. 垂直时间线
  2. 水平时间线

垂直时间线

时间轴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.

77个CSS时间轴

水平时间线

调整延时摄影

请将$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.


【阿里云感恩回馈,云产品冰点价】最高31%返现 • 云服务器96.00元/年 • 产品低至1.3折