时间轴列表css特效,不需要js只需要定义css就可以简单实用。
![时间轴列表页面手机端css特效_图一 时间轴列表页面手机端css特效_图一](http://pic.erlangyun.com/assets/attachment/product/201710/12/28_15078000002fWb.jpg)
html代码
<div style="padding:10px">
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">最新资源</h3>
</div>
<div class="panel-body">
<!-- Timeline -->
<!--===================================================-->
<div class="timeline">
<!-- Timeline header -->
<div class="timeline-entry">
<div class="timeline-stat">
<div class="timeline-icon bg-info"></div>
<div class="timeline-time">2017-10-12</div>
</div>
<div class="timeline-label">
<h4 class="mar-no pad-btm"><a title="手机端页面左右滑动切换" class="text-info" href="http://yuanmouren.erlyun.com/p?id=31" target="_blank">手机端页面左右滑动切换</a></h4>
<p><span class="click">阅读量:2</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></span></p>
</div>
</div>
<div class="timeline-entry">
<div class="timeline-stat">
<div class="timeline-icon bg-info"></div>
<div class="timeline-time">2017-10-11</div>
</div>
<div class="timeline-label">
<h4 class="mar-no pad-btm"><a title="js移动端图片自动轮播插件" class="text-info" href="http://yuanmouren.erlyun.com/p?id=30" target="_blank">js移动端图片自动轮播插件</a></h4>
<p><span class="click">阅读量:7</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></span></p>
</div>
</div>
<div class="timeline-entry">
<div class="timeline-stat">
<div class="timeline-icon bg-info"></div>
<div class="timeline-time">2017-10-10</div>
</div>
<div class="timeline-label">
<h4 class="mar-no pad-btm"><a title="js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件" class="text-info" href="http://yuanmouren.erlyun.com/p?id=3" target="_blank">js地区选择器(支持select/option标签和ul/li标签选择)、三级联动、省市区选择的一个简单的jQuery插件</a></h4>
<p><span class="click">阅读量:156</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></p>
</div>
</div>
<div class="timeline-entry">
<div class="timeline-stat">
<div class="timeline-icon bg-purple"></div>
<div class="timeline-time">2017-10-09</div>
</div>
<div class="timeline-label">
<h4 class="mar-no pad-btm"><a title="抽奖小程序仿制ios日历效果" class="text-info" href="http://yuanmouren.erlyun.com/p?id=28" target="_blank">抽奖小程序仿制ios日历效果</a></h4>
<p><span class="click">阅读量:27</span> <span class="autor">作者:<a href="http://yuanmouren.erlyun.com/28">容若</a></span></p>
</div>
</div>
</div>
</div>
</div>
</div>