Time Axis Timeline Effect

To achieve a time axis like QQ space timeline effect

====================

Analysis: The border-left implementation of the left UL, this will appear at the bottom of the remaining lines, not beautiful,

So consider Li's border-left implementation. Li's Padding-bottom open up and down spacing

H4 title: Before realizes the circle and navigates to the left.

The implementation of the circle using absolute positioning implementation, note under the UL and Li implementation mode, the Circle positioning position.

=========ul Implementing Border =======

. money-process. process-list {
width:90%;
height:100%;
Margin:1.5rem Auto 0;
Padding-left:2.5rem;
border-left:2px #AAD8FC Solid;
}

. process-list Li H4:before {
Content: ";
Display:block;
Width:2.2rem;
Height:2.2rem;
Line-height:2.2rem;
border:2px #52AFF9 Solid;
border-radius:50%;
Text-align:center;
Vertical-align:middle;
Font-size:1.2rem;
Position:absolute;
Left: -2.5rem;
top:-5px;
Margin-left: -1.2rem;/* negative itself is half the width, and there is a border, so you have to calculate the width of the added border half */
Background: #fff;
}

=========================

=================li Implementing Border =====================

. process-list Li {
position:relative;
Padding-bottom:2.5rem;
border-left:2px #AAD8FC Solid;
Padding-left:2.5rem;
}

. process-list Li H4:before {
Content: ";
Display:block;
Width:2.2rem;
Height:2.2rem;
Line-height:1.8rem;
/* Because of the default box model, the public style is set inside: before{box-sizing:border-box;}, so (22px-2*2px) is line height */
border:2px #52AFF9 Solid;
-webkit-border-radius:1.1rem;
Border-radius:1.1rem;
Text-align:center;
Vertical-align:middle;
Font-size:1.2rem;
Position:absolute;
left:0;
Top: -6px;
Margin-left: -1.2rem;
/* Negative itself is half the width, and there is a border, so you have to calculate the added border width half */
Background: #fff;
}

================================================

UL Realized connection: Http://files.cnblogs.com/files/leshao/%E6%97%B6%E9%97%B4%E8%BD%B4-UL.rar

Li Implementation Link: Http://files.cnblogs.com/files/leshao/%E6%97%B6%E9%97%B4%E8%BD%B4-UL.rar

Thanks for the soy sauce, Jane, a tree, 993

Time Axis Timeline Effect