Dorea.js框架介紹：純CSS寫出優雅好看的時間線/時間軸（左右垂直展示）

在準備搭建博客，準備寫一個心情的功能模塊，以時間線的形式展現出來（有的人稱爲時間軸），發現Layer的提供的時間線挺好看的。速遞地址：layui。但不是很符合本人自己的心意，想要一種左右左右展示的風格，於是模仿layer寫了一個左右左右展示的時間線/時間軸。

思路：固定寬度的盒子，li只佔50%，利用浮動，奇數在右側，偶數在左側。

直接貼碼：

<div class="timer-shaft-wrap">
    <div class="timeline">
        <ul>
            <li>
                <i class="tl-circle"></i>
                <div class="timeline-content">
                    <span>2018年07月27日</span>
                    <p>
                    《哆啦A夢》（日語：ドラえもん；英語：Doraemon；舊譯叮噹 / 小叮噹）
                    是由日本漫畫家藤本弘（筆名藤子·F·不二雄）和
                    安孫子素雄（筆名藤子不二雄A）共同創作的漫畫作品，
                    1987年12月23日後，由於兩位作者打算各自創作漫畫，
                    《哆啦A夢》系列的創作便完全由藤本弘負責。
                        <img src="http://img.zcool.cn/community/[email protected]">
                    </p>
                </div>
            </li>
            <li>
                <i class="tl-circle"></i>
                <div class="timeline-content">
                    <span>2018年07月28日</span>
                    <p>
                        今天是7月28號
                        <br>我來自中華人民共和過
                        <br>咦咦咦，這個時間軸很漂亮啊
                        <br>超喜歡作者的文章
                        <br>關注一下作者的github吧。比心
                    </p>
                </div>
            </li>
            <li>
                <i class="tl-circle"></i>
            </li>
        </ul>
    </div>
</div>

/* 時間線 */
.timeline{
    text-align: center;
    background-color: #fff;    
}
.timeline>ul{
    padding: 0;
    display: inline-block;
    width: 600px;
}
.timeline>ul>li{
    position: relative;
    width: 50%;
    min-height: 17px;
    list-style: none;
    clear: both;    
}
/* 偶數的li在右側 */
.timeline>ul>li:nth-child(odd){
    float: right;
}
.timeline>ul>li:nth-child(odd)::before{
    display: block;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
}
.timeline>ul>li:nth-child(odd) i{
    left: -8.5px;
}
.timeline>ul>li:nth-child(odd) div.timeline-content{
    padding-left: 30px;
}
/* 奇數的li在左側 */
.timeline>ul>li:nth-child(even){
    float: left;
}
.timeline>ul>li:nth-child(even)::after{
    display: block;
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    z-index: 0;
    width: 1px;
    height: 100%;
    background-color: #e6e6e6;
}
.timeline>ul>li:nth-child(even) i{
    right: -8.5px;
}
.timeline>ul>li:nth-child(even) div.timeline-content{
    padding-right: 30px;
} 
.timeline>ul>li:nth-child(even) span{
    text-align: right;
}

/* 共同樣式 */
.timeline>ul>li div.timeline-content{
    text-align: left;    
    box-sizing: border-box;
}   
.timeline>ul>li img{
    display: block;
    padding: 10px 0;
    width: 100%;
    box-sizing: border-box;
}
.timeline>ul>li p{
    margin: 0;
    color: #555;
}
.timeline>ul>li span{
    margin-bottom: 13px;
    display: block;
    font-size: 15px;
    font-weight: 500;
}
.timeline>ul>li i{
    position: absolute;
    top: 1px;
    z-index: 10;
    width: 17px;
    height: 17px;
    line-height: 20px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #393D49;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
}
/* 時間線 end*/

直接效果圖：

有比較的輪子或者UI，本人寫好後會直接放上GitHub的倉庫。

謝謝各位支持，喜歡的朋友可以fork一下哦！

Github: https://github.com/zpChiu/dorea.git

文章原創，轉摘請知悉本人。

比心。