时间轴特效 超酷的CSS3垂直时间轴特效

这是一个很酷的CSS3垂直时间轴特效。CSS3垂直时间轴特效通过伪元素做出一个很酷的半圆，所有半圆连成一条曲线路径，形成时间轴。

查看演示下载源代码

施用方式

在页面中引入bootstrap.min.css文件。

& ltlinkrel= "样式表" type = " text/CSS " href = " CSS/bootstrap . min . CSS " gt。HTML结构

CSS3垂直时间轴的HTML结构如下:

& ltdivclass="container">。& ltdivclass="row " >& ltdivclass="col-md-12 " >& ltdivclass="main-timeline " >& ltdivclass="timeline">。& ltdivclass="timeline-icon">。& ltspanclass="year">。2018 <。/span>。& lt/div>。& ltdivclass="timeline-content ">。& lth3class="title " >网站设计<。/h3>。& ltPC lass = " deion " gt。Lorem ipsum dolor sit amet，...& lt/p>。& lt/div>。& lt/div>。& ltdivclass="timeline">。& ltdivclass="timeline-icon">。& ltspanclass="year">。2017 <。/span>。& lt/div>。& ltdivclass="timeline-content ">。& lth3class="title " >网络开发者& lt/h3>。& ltPC lass = " deion " gt。Lorem ipsum dolor sit amet...& lt/p>。& lt/div>。& lt/div>。& lt/div>。& lt/div>。& lt/div>。& lt/div>。CSS样式

为CSS3垂直时间轴添加CSS代码。

CSS3代码请参考原语言的代码详情。

这个CSS3代码中使用了变形、角度等很多CSS3特性。不熟悉CSS3的同学可以参考CSS3手册。

查看原文，查看在线演示。