最近打開電腦就能看到極客學院什麼新用戶vip免費一個月，就進去看看咯，這裡就不說它的課程怎麼滴了，裡面實戰路徑圖頁面看到了這個效果：
有點像時間軸的趕腳，而且每一塊滑鼠懸浮上去也有下拉效果展開介紹截圖信息，就感覺效果還不錯。但感覺這種效果似乎對於動態添加不是很靈活，因為高度不像寬度可以靈活的自適應，故添加得自己一個一個設定。所以很多都是做成展示效果。
當然啦，自己也基於它的這個想法搞了一點簡單點的類似效果，主要還是整個佈局效果，具體每一塊內容就不彷造了，而且我自己也加了一下開場動畫，讓它更好玩一些…
先來看看效果吧：
大概效果就是這樣啦，下來廢話不說，還是直接進入主題：
HTML結構：
<p class="timezone">
<p class="time">
<h2>2015-07-02</h2>
<p>
<p>暴走大事件第一季</p>
<ul>
</ul>
</p>
</p>
<p class="timeLeft" style="top: 100px;">
<h2>2015-07-02</h2>
<p>
<p>暴走大事件第二季</p>
<ul>
</ul>
</p>
</p>這裡簡化了一下HTML結構，.time類別表示在右邊，.timeLeft表示在左邊，然後加點上外邊距就可以了，每一塊裡面的內容我就刪減了。
CSS樣式程式碼如下：
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: '未完待续...';
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 p,.timezone .timeLeft p{
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 p{
left:-337px;
}
.timezone .time p:hover,.timezone .timeLeft p:hover{
height: 170px;
}
.timezone .time p p,.timezone .timeLeft p 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 p ul,.timezone .timeLeft p ul{
list-style: none;
width:300px;
padding:5px 0 0;
border-top:2px solid #eee;
color:#fff;
text-align: center;
}
.timezone .time p li,.timezone .timeLeft p li{
display: inline-block;
height: 25px;
line-height: 25px;
}此CSS樣式程式碼僅供參考，實用性不是很強，而且同樣沒有怎麼整理過，主要還是理解動畫效果還有整體佈局吧。祝好！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持PHP中文網。
更多CSS3實現時間軸效果方法相關文章請關注PHP中文網！
