這篇文章主要講解了“怎么用CSS3垂直時間軸特效”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“怎么用CSS3垂直時間軸特效”吧！

創(chuàng)新互聯(lián)主要從事網(wǎng)站設(shè)計制作、成都網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)前郭,十余年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):028-86922220

這是一款超酷的CSS3垂直時間軸特效。該CSS3垂直時間軸特效通過偽元素來制作超酷的半圓形，所有半圓形連接為一條曲線路徑，從而組成了時間軸的線路。

使用方法

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

HTML結(jié)構(gòu)

該CSS3垂直時間軸的HTML結(jié)構(gòu)如下：

   

       

           

               

                   

2018

                   

                       

Web Desginer

                       

                           Lorem ipsum dolor sit amet,...                        

                   

               

               

                   

2017

                   

                       

Web Developer

                       

                           Lorem ipsum dolor sit amet...                        

                   

               

           

       

   

CSS樣式

為該CSS3垂直時間軸添加下面的CSS代碼。

.main-timeline{    overflow: hidden;    position: relative;}.main-timeline .timeline{    position: relative;    margin-top: -79px;}.main-timeline .timeline:first-child{ margin-top: 0; }.main-timeline .timeline:before,.main-timeline .timeline:after{    content: "";    display: block;    width: 100%;    clear: both;}.main-timeline .timeline:before{    content: "";    width: 100%;    height: 100%;    position: absolute;    top: 0;    right: 0;    z-index: 2;}.main-timeline .timeline-icon{    width: 210px;    height: 210px;    border-radius: 50%;    border: 25px solid transparent;    border-top-color: #f44556;    border-right-color: #f44556;    margin: auto;    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    z-index: 1;    transform: rotate(45deg);}.main-timeline .year{    display: block;    width: 110px;    height: 110px;    line-height: 110px;    border-radius: 50%;    background: #fff;    box-shadow: 0 0 20px rgba(0,0,0,0.4);    margin: auto;    font-size: 30px;    font-weight: bold;    color: #f44556;    text-align: center;    position: absolute;    top: 0;    left: 0;    bottom: 0;    right: 0;    transform: rotate(-45deg);}.main-timeline .timeline-content{    width: 35%;    float: right;    background: #f44556;    padding: 30px 20px;    margin: 50px 0;    z-index: 1;    position: relative;}.main-timeline .timeline-content:before{    content: "";    width: 20%;    height: 15px;    background: #f44556;    position: absolute;    top: 50%;    left: -20%;    z-index: -1;    transform: translateY(-50%);}.main-timeline .title{    font-size: 20px;    font-weight: bold;    color: #fff;    margin: 0 0 10px 0;}.main-timeline .description{    font-size: 16px;    color: #fff;    line-height: 24px;    margin: 0;}.main-timeline .timeline:nth-child(2n) .timeline-icon{ transform: rotate(-135deg); }.main-timeline .timeline:nth-child(2n) .year{ transform: rotate(135deg); }.main-timeline .timeline:nth-child(2n) .timeline-content{ float: left; }.main-timeline .timeline:nth-child(2n) .timeline-content:before{    left: auto;    right: -20%;}.main-timeline .timeline:nth-child(2n) .timeline-icon{    border-top-color: #e97e2e;    border-right-color: #e97e2e;}.main-timeline .timeline:nth-child(2n) .year{ color: #e97e2e; }.main-timeline .timeline:nth-child(2n) .timeline-content,.main-timeline .timeline:nth-child(2n) .timeline-content:before{ background: #e97e2e; }.main-timeline .timeline:nth-child(3n) .timeline-icon{    border-top-color: #13afae;    border-right-color: #13afae;}.main-timeline .timeline:nth-child(3n) .year{ color: #13afae; }.main-timeline .timeline:nth-child(3n) .timeline-content,.main-timeline .timeline:nth-child(3n) .timeline-content:before{ background: #13afae; }.main-timeline .timeline:nth-child(4n) .timeline-icon{    border-top-color: #105572;    border-right-color: #105572;}.main-timeline .timeline:nth-child(4n) .year{ color: #105572; }.main-timeline .timeline:nth-child(4n) .timeline-content,.main-timeline .timeline:nth-child(4n) .timeline-content:before{ background: #105572; }@media only screen and (max-width: 1199px){    .main-timeline .timeline{ margin-top: -103px; }    .main-timeline .timeline-content:before{ left: -18%; }    .main-timeline .timeline:nth-child(2n) .timeline-content:before{ right: -18%; }}@media only screen and (max-width: 990px){    .main-timeline .timeline{ margin-top: -127px; }    .main-timeline .timeline-content:before{ left: -2%; }    .main-timeline .timeline:nth-child(2n) .timeline-content:before{ right: -2%; }}@media only screen and (max-width: 767px){    .main-timeline .timeline{        margin-top: 0;        overflow: hidden;    }    .main-timeline .timeline:before,    .main-timeline .timeline:nth-child(2n):before{        box-shadow: none;    }    .main-timeline .timeline-icon,    .main-timeline .timeline:nth-child(2n) .timeline-icon{        margin-top: -30px;        margin-bottom: 20px;        position: relative;        transform: rotate(135deg);    }    .main-timeline .year,    .main-timeline .timeline:nth-child(2n) .year{ transform: rotate(-135deg); }    .main-timeline .timeline-content,    .main-timeline .timeline:nth-child(2n) .timeline-content{        width: 100%;        float: none;        border-radius: 0 0 20px 20px;        text-align: center;        padding: 25px 20px;        margin: 0 auto;    }    .main-timeline .timeline-content:before,    .main-timeline .timeline:nth-child(2n) .timeline-content:before{        width: 15px;        height: 25px;        position: absolute;        top: -22px;        left: 50%;        z-index: -1;        transform: translate(-50%,0);    }}

該CSS3代碼中用了很多變形、角度等CSS3特性，不熟悉CSS3的同學(xué)可以參考CSS3手冊。

感謝各位的閱讀，以上就是“怎么用CSS3垂直時間軸特效”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對怎么用CSS3垂直時間軸特效這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司，，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！

新聞名稱：怎么用CSS3垂直時間軸特效-創(chuàng)新互聯(lián)
本文鏈接：http://weahome.cn/article/codcgj.html