CSS3實(shí)現(xiàn)時(shí)間軸效果
發(fā)布時(shí)間：2016-07-11 16:11:19 作者：佚名 
我要評(píng)論
我要評(píng)論這篇文章主要為大家詳細(xì)介紹了CSS3實(shí)現(xiàn)時(shí)間軸效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
最近打開電腦就能看到極客學(xué)院什么新用戶vip免費(fèi)一個(gè)月，就進(jìn)去看看咯，這里就不說它的課程怎么滴了，里面實(shí)戰(zhàn)路徑圖頁面看到了這個(gè)效果：
有點(diǎn)像時(shí)間軸的趕腳，而且每一塊鼠標(biāo)懸浮上去也有下拉效果展開介紹截圖信息，就感覺效果還不錯(cuò)。但感覺這種效果貌似對(duì)于動(dòng)態(tài)添加不是很靈活，因?yàn)楦叨炔幌駥挾瓤梢造`活的自適應(yīng)，故添加得自己一個(gè)一個(gè)設(shè)置。所以很多都是做成展示效果。
當(dāng)然啦，自己也基于它的這個(gè)想法搞了一點(diǎn)簡(jiǎn)單點(diǎn)的類似效果，主要還是整個(gè)布局效果，具體每一塊內(nèi)容就不仿造了，而且我自己也加了一下開場(chǎng)動(dòng)畫，讓它更好玩一些…
先來看看效果吧：
大概效果就是這樣啦，下來廢話不說，還是直接進(jìn)入主題：
HTML結(jié)構(gòu)：
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="timezone">
- <div class="time">
- <h2>2015-07-02</h2>
- <div>
- <p>暴走大事件第一季</p>
- <ul>
- </ul>
- </div>
- </div>
- <div class="timeLeft" style="top: 100px;">
- <h2>2015-07-02</h2>
- <div>
- <p>暴走大事件第二季</p>
- <ul>
- </ul>
- </div>
- </div>
這里簡(jiǎn)化了一下HTML結(jié)構(gòu)，.time類表示在右邊，.timeLeft表示在左邊，然后加點(diǎn)上外邊距就可以了，每一塊里面的內(nèi)容我就刪減掉了。
CSS樣式代碼如下：
CSS Code復(fù)制內(nèi)容到剪貼板
- body{
- background: #333;
- }
- h1{
- 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;
- bottombottom: -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 h2,.timezone .timeLeft h2{
- position: absolute;
- margin-left: -120px;
- margin-top: 3px;
- color:#eee;
- font-size: 14px;
- cursor:pointer;
- -webkit-animation: showIn 3s ease;
- }
- .timezone .timeLeft h2{
- 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;
- }
此CSS樣式代碼僅供參考，實(shí)用性不是很強(qiáng)，而且同樣沒有怎么整理過，主要還是理解一下動(dòng)畫效果還有整體布局吧。祝好！
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
原文鏈接：http://www.cnblogs.com/jr1993/p/4626815.html
相關(guān)文章
前端css實(shí)現(xiàn)最基本的時(shí)間軸的示例代碼
本篇文章主要介紹了前端css實(shí)現(xiàn)最基本的時(shí)間軸的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-02
