最近打开电脑就能看到极客学院什么新用户vip免费一个月，就进去看看咯，这里就不说它的课程怎么滴了，里面实战路径图页面看到了这个效果：
有点像时间轴的赶脚，而且每一块鼠标悬浮上去也有下拉效果展开介绍截图信息，就感觉效果还不错。但感觉这种效果貌似对于动态添加不是很灵活，因为高度不像宽度可以灵活的自适应，故添加得自己一个一个设置。所以很多都是做成展示效果。
当然啦，自己也基于它的这个想法搞了一点简单点的类似效果，主要还是整个布局效果，具体每一块内容就不仿造了，而且我自己也加了一下开场动画，让它更好玩一些…
先来看看效果吧：
大概效果就是这样啦，下来废话不说，还是直接进入主题：
html结构：
xml/h2020高速免费最新消息tml code
复制内容到剪贴板
<divclass=“timezone”> <divclass=“tim中秋月圆图片大全e”> <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:showin4a; } .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:showinea; } .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:showin3a; } .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:showin3a; -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:showin3a; } .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样式代码仅供参考，实用性不是很强，而且同样没有怎么整理过，主要还是理解一下动画效果还有整体布局吧。祝好！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
原文链接：
