带时间轴的包裹图文信息卡片

一款带时间轴的包裹图文信息卡片特效，页面初始化后在卡片的任意点击，即可展开垂直时间轴的图文效果的包裹信息卡片内容，时间点、消息内容和图片等都可以自由增加或删除，适合移动端的页面使用，喜欢的童鞋请收下吧。

分类：悬浮层/弹出层 > 悬浮层难易：初级

查看演示下载资源下载积分： 20 积分

页面的head部分，需远程调用一个CSS样式文件，并引入本地样式文件style.css，代码如下：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，主要是用ol标签设置的有序列表，代码如下：

<div class="cards">
	<div class="card" id="card">
		<div class="card__brand">
			<img src="http://b.zol-img.com.cn/mobile_soft/ms_20/180x180/soxMxzVCtw3Ec.png" alt="Amazon logo" class="card__logo">
			<h1>淘宝</h1>
		</div>
		<div class="card__content">
			<ol class="event__timeline">
				<li class="event__group">
					<strong class="event__group-date">
						9<span>8月</span>
					</strong>
					<ol>
						<li class="event">
							<strong class="event__time">上午 10:30</strong>
							<p>正在派送...</p>
						</li>
						<li class="event">
							<strong class="event__time">下午 5:58</strong>
							<p>运输中...包裹图片</p>
							<span class="event__img">
								<img src="http://unsplash.it/250/150?image=433" alt="Photo">
							</span>
						</li>
					</ol>
				</li>
				<li class="event__group">
					<strong class="event__group-date">
						5<span>8月</span>
					</strong>
					<ol>
						<li class="event">
							<strong class="event__time">上午 10:30</strong>
							<p>到达物流集散中心</p>
						</li>
					</ol>
				</li>
			</ol>
		</div>
		<p class="card__status">正在派送...</p>
		<span class="card__background"></span>
	</div>
</div>

页面的底部，需远程调用jQuery库和TweenMax.min.js插件，并引入本地JS文件，代码如下：

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>