最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这里就不说它的课程怎么滴了，里面实战路径图页面看到了这个效果：

有点像时间轴的赶脚，而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息，就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活，因为高度不像宽度可以灵活的自适应，故添加得自己一个一个设置。所以很多都是做成展示效果。

当然啦，自己也基于它的这个想法搞了一点简单点的类似效果，主要还是整个布局效果，具体每一块内容就不仿造了，而且我自己也加了一下开场动画，让它更好玩一些…

先来看看效果吧：

大概效果就是这样啦，下来废话不说，还是直接进入主题：

HTML结构：

XML/HTML Code复制内容到剪贴板 <divclass="timezone"> <divclass="time"> <h2>2015-07-02</h2> <div> <p>暴走大事件第一季</p> <ul> </ul> </div> </div> <divclass="timeLeft"style="top:100px;"> <h2>2015-07-02</h2> <div> <p>暴走大事件第二季</p> <ul> </ul> </div> </div>

这里简化了一下HTML结构，.time类表示在右边，.timeLeft表示在左边，然后加点上外边距就可以了，每一块里面的内容我就删减掉了。

CSS样式代码如下：

CSS Code复制内容到剪贴板 body{ background:#333; } h1{ text-align:center; color:#fff; } .timezone{ width:6px; height:350px; background:lightblue; margin:0auto; margin-top:50px; border-radius:3px; position:relative; -webkit-animation:heightSlide2slinear; } @-webkit-keyframesheightSlide{ 0%{ height:0; } 100%{ height:350px; } } .timezone:after{ content:'未完待续...'; width:100px; color:#fff; position:absolute; margin-left:-35px; bottombottom:-30px; -webkit-animation:showIn4sease; } .timezone.time,.timezone.timeLeft{ position:absolute; margin-left:-10px; margin-top:-10px; width:20px; height:20px; border-radius:50%; border:4pxsolidrgba(255,255,255,0.5); background:lightblue; -webkit-transition:all0.5s; -webkit-animation:showInease; } .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-keyframesshowIn{ 0%,70%{ opacity:0; } 100%{ opacity:1; } } .timezone.timeh2,.timezone.timeLefth2{ position:absolute; margin-left:-120px; margin-top:3px; color:#eee; font-size:14px; cursor:pointer; -webkit-animation:showIn3sease; } .timezone.timeLefth2{ margin-left:60px; width:100px; } .timezone.time:hover,.timezone.timeLeft:hover{ border:4pxsolidlightblue; background:lemonchiffon; box-shadow:002px2pxrgba(255,255,255,0.4); } .timezone.timediv,.timezone.timeLeftdiv{ position:absolute; top:50%; margin-top:-25px; left:50px; width:300px; height:50px; background:lightblue; border:3pxsolid#eee; border-radius:10px; z-index:2; overflow:hidden; cursor:pointer; -webkit-animation:showIn3sease; -webkit-transition:all0.5s; } .timezone.timeLeftdiv{ left:-337px; } .timezone.timediv:hover,.timezone.timeLeftdiv:hover{ height:170px; } .timezone.timedivp,.timezone.timeLeftdivp{ 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:10pxsolidtransparent; border-right:10pxsolid#eee; z-index:-1; -webkit-animation:showIn3sease; } .timezone.timeLeft:before{ left:-33px; border:10pxsolidtransparent; border-left:10pxsolid#eee; } .timezone.timedivul,.timezone.timeLeftdivul{ list-style:none; width:300px; padding:5px00; border-top:2pxsolid#eee; color:#fff; text-align:center; } .timezone.timedivli,.timezone.timeLeftdivli{ display:inline-block; height:25px; line-height:25px; }

此CSS样式代码仅供参考，实用性不是很强，而且同样没有怎么整理过，主要还是理解一下动画效果还有整体布局吧。祝好！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。

原文链接：http://www.cnblogs.com/jr1993/p/4626815.html