来源 | web前端开发（ID：web_qdkf)

作者 | web前端开发

最近，看到一些很漂亮的时间轴图表，效果真的非常不错。这些图表，写到需要的项目中，也是非常棒的。当然，你也可以拿它来当作学习的小练习。

时间轴，在很多企业官网或者关于企业历史大事件介绍的时候，使用的频率还是非常高的。

于是我们就把它作为了一期关于时间轴的源码案例专题分享出来。图表实现效果如下：

图表1

这个【图表1】是一款采用了CSS3来实现的垂直时间轴特效。该特效是通过HTML DOM元素和CSS transform来制作非常炫酷的时间轴效果。

它的使用方法也非常简单，你只需要在页面中引入fontawesome.min.css和bootstrap.min.css文件即可。

引用代码如下：

<link href="dist/bootstrap.min.css" rel="stylesheet"><link href="dist/fontawesome.min.css" rel="stylesheet">

HTML代码如下：

<div class="container">    <div class="row">        <div class="