html+css3+jQuery实现垂直的动画时间轴特效
1、准备好需要用到的图标。
2、新建html文档。
3、书写hmtl代码。
<div class="timeline">
<div class="timeline-date">
<ul>
<h2 class="second" style="position: relative;"> <span>2013年</span> </h2>
<li>
<h3>09.03<span>2013</span></h3>
<dl class="right">
<span>111111111111111111111</span>
</dl>
</li>
<li>
<h3>08.15<span>2013</span></h3>
<dl class="right">
<span>111111111111111111111</span>
</dl>
</li>
</ul>
</div>
<div class="timeline-date">
<ul>
<h2 class="second" style="position: relative;"> <span>2012年</span> </h2>
<li>
<h3>09.03<span>2012</span></h3>
<dl class="right">
<span>111111111111111111111</span>
</dl>
</li>
<li>
<h3>08.15<span>2012</span></h3>
<dl class="right">
<span>111111111111111111111</span>
</dl>
</li>
</ul>
</div>
</div>
4、书写css代码。
body,h2,ul,h3{padding:0;margin:0;}
ul{list-style:none outside none;}
/* timeline */
.timeline{background:url("../images/line4.png") repeat-y 50px 0;overflow:hidden;position:relative;height:100px;margin:20px 10px;width:520px;margin:40px auto 0 auto;}
.timeline-date{overflow:hidden;position:relative;}
.timeline-date h2{background:url("../images/icon9.png") no-repeat 10px 0;height:87px;margin-bottom:20px;}
.timeline-date h2 span{color:#999999;display:inline-block;font-size:22px;margin:30px 0px 0 110px;}
.timeline-date ul li{background:url("../images/icon7.png") no-repeat 42px 5px;zoom:1;height:70px;}
.timeline-date ul li h3{float:left;text-align:right;font-size:14px;color:#878787;display:block;}
.timeline-date ul li h3 span{display:block;color:#ADADAD;font-size:12px;padding-left:15px;}
.timeline-date ul li dl{margin-top:-5px;}
.timeline-date ul li dl.right{background:url() no-repeat 0 0;float:left;margin-left:35px;margin-top:-5px;display:block;background-color:#FFBB42;height:40px;width:216px;}
.timeline-date ul li dl span{display:block;font-size:16px;padding:0px 10px 0px 30px;color:#fff;line-height:40px;}
5、书写并添加js代码。
<script src="js/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$(".timeline").eq(0).animate({
height:'600px'
},3000);
});
</script>
6、代码整体结构。
7、查看效果。
