<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
.lzc_timeline { margin:10px 0 0 0; padding: 0; list-style: none; position: relative; }
.lzc_timeline:before { content: ''; position: absolute; top: 0; bottom: 0; width: 5px; background: #afdcf8; left: 20px; margin-left: -10px; }
.lzc_timeline > li { position: relative; }
.lzc_timeline > li .lzc_time { display: block; position: absolute;}
.lzc_timeline > li .lzc_time span { display: block; text-align: right; }
.lzc_timeline > li .lzc_time span:first-child { font-size: 8px; color: #bdd0db; }
.lzc_timeline > li .lzc_time span:last-child { font-size: 12px; color: #3594cb; }
.lzc_timeline > li:nth-child(odd) .lzc_time span:last-child { color: #6cbfee; }
.lzc_timeline > li .lzc_label { margin: 0 8px 8px 30px; background: #afdcf8; padding: 10px; position: relative; border-radius: 5px; height: 100px; box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.19)}
.lzc_timeline > li:nth-child(odd) .label { background: #579dc5; }
.lzc_timeline > li .lzc_label h2 {font-size: 16px; text-shadow: rgba(7, 84, 152, 0.71) 1px 1px 1px; }
.lzc_timeline > li .lzc_label:after { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-right-color: #afdcf8; border-width: 10px; top: 10px; }
.lzc_timeline > li:nth-child(odd) .lzc_label:after { border-right-color: #afdcf8; }
.lzc_timeline > li .lzc_icon { width: 10px; height: 10px; font-family: 'ecoico'; speak: none; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; font-size: 1.4em; line-height: 40px; -webkit-font-smoothing: antialiased; position: absolute; color: #fff; background: #46a4da; border-radius: 50%; box-shadow: 0 0 0 3px #afdcf8; text-align: center; left: 32px; top: 15px; margin: 0 0 0 -25px; }
.lzc_blogpic { width: 200px; height: 120px; overflow: hidden; display: block; float: left; margin-right: 20px; }
.lzc_timeline li .lzc_time { -webkit-transition: all 1s; -moz-transition: all 1s; -o-transition: all 1s; }
.lzc_timeline li:hover .lzc_icon { box-shadow: 0 0 0 3px #ececec; }
.lzc_timeline li:hover .lzc_time { background: #afdcf8; border-radius: 20px 0 0 20px; }
.lzc_timeline li:hover .lzc_time span { color: #fff; }
</style>
</head>
<body >
<article>
<div>
<ul id = "sale_list" class="lzc_timeline">
<li class="time-line-item" >
<div class="lzc_icon"></div>
<div class="lzc_label" data-scroll-reveal="enter right over 1s" >
<span>2018-05-01</span>
<div style="margin-top:8px">天气晴朗</div>
<div style="margin-top:8px">适合跑步</div>
<div style="position:absolute;right: 8px;bottom:10px">查看更多>></div>
</div>
</li>
<li class="time-line-item" >
<div class="lzc_icon"></div>
<div class="lzc_label" data-scroll-reveal="enter right over 1s" >
<span>2018-05-02</span>
<div style="margin-top:8px">天气晴朗</div>
<div style="margin-top:8px">适合跑步</div>
<div style="position:absolute;right: 8px;bottom:10px">查看更多>></div>
</div>
</li>
<li class="time-line-item" >
<div class="lzc_icon"></div>
<div class="lzc_label" data-scroll-reveal="enter right over 1s" >
<span>2018-05-03</span>
<div style="margin-top:8px">天气晴朗</div>
<div style="margin-top:8px">适合跑步</div>
<div style="position:absolute;right: 8px;bottom:10px">查看更多>></div>
</div>
</li>
<li class="time-line-item" >
<div class="lzc_icon"></div>
<div class="lzc_label" data-scroll-reveal="enter right over 1s" >
<span>2018-05-04</span>
<div style="margin-top:8px">天气晴朗</div>
<div style="margin-top:8px">适合跑步</div>
<div style="position:absolute;right: 8px;bottom:10px">查看更多>></div>
</div>
</li>
</ul>
</div>
</article>
<script>
</script>
</body>
</html>
效果图如下：
