使用CSS3實現(xiàn)簡單時間軸效果的案例-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了使用CSS3實現(xiàn)簡單時間軸效果的案例，內(nèi)容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學(xué)習(xí)一下“使用CSS3實現(xiàn)簡單時間軸效果的案例”這篇文章吧。

創(chuàng)新互聯(lián)建站專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、梅河口網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、梅河口網(wǎng)絡(luò)營銷、梅河口企業(yè)策劃、梅河口品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；創(chuàng)新互聯(lián)建站為所有大學(xué)生創(chuàng)業(yè)者提供梅河口建站搭建服務(wù)，24小時服務(wù)熱線：18980820575，官方網(wǎng)址：muchs.cn

css是什么意思

css是一種用來表現(xiàn)HTML或XML等文件樣式的計算機(jī)語言，主要是用來設(shè)計網(wǎng)頁的樣式，使網(wǎng)頁更加美化。它也是一種定義樣式結(jié)構(gòu)如字體、顏色、位置等的語言，并且css樣式可以直接存儲于HTML網(wǎng)頁或者單獨(dú)的樣式單文件中，而樣式規(guī)則的優(yōu)先級由css根據(jù)這個層次結(jié)構(gòu)決定，從而實現(xiàn)級聯(lián)效果，發(fā)展至今，css不僅能裝飾網(wǎng)頁，也可以配合各種腳本對于網(wǎng)頁進(jìn)行格式化。

最近打開電腦就能看到一個實戰(zhàn)路徑圖頁面，效果是這樣的：

使用CSS3實現(xiàn)簡單時間軸效果的案例

有點(diǎn)像時間軸的趕腳，而且每一塊鼠標(biāo)懸浮上去也有下拉效果展開介紹截圖信息，就感覺效果還不錯。但感覺這種效果貌似對于動態(tài)添加不是很靈活，因為高度不像寬度可以靈活的自適應(yīng)，故添加得自己一個一個設(shè)置。所以很多都是做成展示效果。

當(dāng)然啦，自己也基于它的這個想法搞了一點(diǎn)簡單點(diǎn)的類似效果，主要還是整個布局效果，具體每一塊內(nèi)容就不仿造了，而且我自己也加了一下開場動畫，讓它更好玩一些…

先來看看效果吧：

使用CSS3實現(xiàn)簡單時間軸效果的案例

大概效果就是這樣啦，下來廢話不說，還是直接進(jìn)入主題：

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

<div class="timezone">
            <div class="time">
                <h3>2015-07-02</h3>
                <div>
                    <p>暴走大事件第一季</p>
                    <ul>

                    </ul>
                </div>
            </div>
            <div class="timeLeft" style="top: 100px;">
                <h3>2015-07-02</h3>
                <div>
                    <p>暴走大事件第二季</p>
                    <ul>

                    </ul>
                </div>
</div>

這里簡化了一下HTML結(jié)構(gòu)，.time類表示在右邊，.timeLeft表示在左邊，然后加點(diǎn)上外邊距就可以了，每一塊里面的內(nèi)容我就刪減掉了。

CSS樣式代碼如下：

body{
                background: #333;
            }
            h2{
                text-align: center;
                color:#fff;
            }
            .timezone{
                width:6px;
                height: 350px;
                background: lightblue;
                margin: 0 auto;
                margin-top:50px;
                border-radius: 3px;
                position: relative;
                -webkit-animation: heightSlide 2s linear;
            }
            @-webkit-keyframes heightSlide{
                0%{
                    height: 0;
                }
                100%{
                    height: 350px;
                }
            }
            .timezone:after{
                content: '未完待續(xù)...';
                width: 100px;
                color:#fff;
                position: absolute;
                margin-left: -35px;
                bottom: -30px;
                -webkit-animation: showIn 4s ease;
            }
            .timezone .time,.timezone .timeLeft{
                position: absolute;
                margin-left: -10px;
                margin-top:-10px;
                width:20px;
                height:20px;
                border-radius: 50%;
                border:4px solid rgba(255,255,255,0.5);
                background: lightblue;
                -webkit-transition: all 0.5s;
                -webkit-animation: showIn ease;
            }
            .timezone .time:nth-child(1){
                -webkit-animation-duration:1s;
            }
            .timezone .timeLeft:nth-child(2){
                -webkit-animation-duration:1.5s;
            }
            .timezone .time:nth-child(3){
                -webkit-animation-duration:2s;
            }
            .timezone .timeLeft:nth-child(4){
                -webkit-animation-duration:2.5s;
            }
            @-webkit-keyframes showIn{
                0%,70%{
                    opacity: 0;
                }
                100%{
                    opacity: 1;
                }
            }
            .timezone .time h3,.timezone .timeLeft h3{
                position: absolute;
                margin-left: -120px;
                margin-top: 3px;
                color:#eee;
                font-size: 14px;
                cursor:pointer;
                -webkit-animation: showIn 3s ease;
            }
            .timezone .timeLeft h3{
                margin-left: 60px;
                width: 100px;
            }
            .timezone .time:hover,.timezone .timeLeft:hover{
                border:4px solid lightblue;
                background: lemonchiffon;
                box-shadow: 0 0 2px 2px rgba(255,255,255,0.4);
            }
            .timezone .time div,.timezone .timeLeft div{
                position: absolute;
                top:50%;
                margin-top: -25px;
                left:50px;
                width: 300px;
                height: 50px;
                background: lightblue;
                border:3px solid #eee;
                border-radius: 10px;
                z-index: 2;
                overflow: hidden;
                cursor:pointer;
                -webkit-animation: showIn 3s ease;
                -webkit-transition: all 0.5s;
            }
            .timezone .timeLeft div{
                left:-337px;
            }
            .timezone .time div:hover,.timezone .timeLeft div:hover{
                height: 170px;
            }
            .timezone .time div p,.timezone .timeLeft div p{
                color: #fff;
                font-weight: bold;
                text-align: center;
            }
            .timezone .time:before,.timezone .timeLeft:before{
                content: '';
                position: absolute;
                top:0px;
                left: 32px;
                width: 0px;
                height: 0px;
                border:10px solid transparent;
                border-right:10px solid #eee;
                z-index:-1;
                -webkit-animation: showIn 3s ease;
            }
            .timezone .timeLeft:before{
                left:-33px;
                border:10px solid transparent;
                border-left:10px solid #eee;
            }
            .timezone .time div ul,.timezone .timeLeft div ul{
                list-style: none;
                width:300px;
                padding:5px 0 0;
                border-top:2px solid #eee;
                color:#fff;
                text-align: center;
            }
            .timezone .time div li,.timezone .timeLeft div li{
                display: inline-block;
                height: 25px;
                line-height: 25px;
            }

以上就是關(guān)于“使用CSS3實現(xiàn)簡單時間軸效果的案例”的內(nèi)容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學(xué)習(xí)新知識，若想了解更多相關(guān)知識內(nèi)容，請多多關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)站欄目：使用CSS3實現(xiàn)簡單時間軸效果的案例-創(chuàng)新互聯(lián)
轉(zhuǎn)載來源：http://muchs.cn/article20/dejdco.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供云服務(wù)器、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、域名注冊、網(wǎng)站建設(shè)、App設(shè)計

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容