时间轴列表页面手机端css特效

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>