近期开启电脑上就可以见到极客学校甚么新客户vip完全免费一个月，就进来看一下咯，这儿也不说它的课程内容如何滴了，里边实战演练相对路径图网页页面见到了这一实际效果：
有点儿像時间轴的赶脚，并且每一块电脑鼠标飘浮上来也是有往下拉实际效果进行详细介绍截屏信息内容，就觉得实际效果还非常好。但觉得这类实际效果好像针对动态性加上并不是很灵便，由于高宽比不象总宽能够灵便的响应式，故加上得自身一个一个设定。因此许多全是制成展现实际效果。
自然啦，自身也根据它的这一念头搞了一点简易点的相近实际效果，关键還是全部合理布局实际效果，实际每一块內容也不仿制了，并且自己也加了一下开局动漫，让它更强玩一些…
先看来看实际效果吧：
大约实际效果便是那样啦，出来空话不用说，還是立即进到主题风格：
HTML构造：
<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>
这儿简单化了一下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;
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 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款式编码仅作参照，好用性并不是较强，并且一样沒有如何梳理过，关键還是了解一下动漫实际效果也有总体合理布局吧。祝好！
全文连接：https://www.cnblogs.com/jr1993/p/4779678.html
之上便是CSS3完成時间轴动画特效的详尽內容，大量有关CSS3 時间轴动画特效的材料请关心脚本制作之家其他有关文章内容！