本文转载自An's Blog，原文链接：利用css伪类轻松实现TimeLine

得益于css伪类我们可以轻松实现许多意想不到的效果，接下来的两款简单的timeline就是利用css伪类完成。

案例1

html结构相当简单

<div class="timeline1">
    <li>left1</li>
    <li>right1</li>
    <li>left2</li>
    <li>right2</li>
</div>

竖线上的圆点，是大圆套小圆，用到伪类 :before，:after

.timeline1 li:nth-child(odd):before {
	content:"";
	background:#ccc;
	height:16px;
	width:16px;
	border-radius:8px;
	position:absolute;
	right:-11px;
	bottom:41px;
	z-index:9;
}
.timeline1 li:nth-child(odd):after {
	content:"";
	background:#fff;
	height:10px;
	width:10px;
	border-radius:8px;
	position:absolute;
	right:-8px;
	bottom:44px;
	z-index:9;
}
.timeline1 li:nth-child(even):before {
	content:"";
	background:#ccc;
	height:16px;
	width:16px;
	border-radius:8px;
	position:absolute;
	left:-11px;
	bottom:32px;
	z-index:9;
}
.timeline1 li:nth-child(even):after {
	content:"";
	background:#fff;
	height:10px;
	width:10px;
	border-radius:8px;
	position:absolute;
	left:-8px;
	bottom:35px;
	z-index:9;
}

再利用伪类选择器.timeline li:nth-child(odd)和.timeline li:nth-child(even)让li奇偶列左右浮动，指定.timeline li:nth-child(2)li列表第二列下沉。

.timeline1 li {
	list-style:none;
	width:352px;
	height:180px;
	background:#f9f9f9;
	padding:10px;
	margin-bottom:20px;
	position:relative;
	box-shadow:0 1px 1px #999;
}
.timeline1 li:hover {
	background:#fff;
}
.timeline1 li:nth-child(odd):hover:after,
.timeline1 li:nth-child(even):hover:after {
	background:#ff5c43;
}
.timeline1 li:nth-child(2) {
	margin-top:100px;
}
.timeline1 li:nth-child(odd) {
	float:left;
}
.timeline1 li:nth-child(even) {
	float:right;
}

案例2

html结构

<div class='timeline2'>
	<div class='data'>
		<h4 class='years'>2014年</h4>
		<div class='show'>
			<section>
				<div class='time'>2013.09</div>
				<div class='event'>
					<h3><a href='#'>文章标题</a></h3>
					内容
				</div>
			</section>
			<section>
				<div class='time'>2013.09</div>
				<div class='event'>
					<h3><a href='#'>文章标题</a></h3>
					内容
				</div>
			</section>
			<section>
				<div class='time'>2013.09</div>
				<div class='event'>
					<h3><a href='#'>文章标题</a></h3>
					内容
				</div>
			</section>
		</div>
	</div>
</div>

主要css（小圆点如案例1）

/* 文章小三角 */
.timeline2 .data .show section .event:before {
	position:absolute;
	top:6px;
	left:-20px;
	content:'';
	border-width:10px;
	border-style:solid;
	border-color:transparent #fff transparent transparent;
}

/* 文章选中圆点动画 */

.timeline2 .data .show section:hover > .time:after {
	/* animation */
	-webkit-animation: timeline2 1s infinite linear;
	-moz-animation: timeline2 1s infinite linear;
	-ms-animation: timeline2 1s infinite linear;
	-o-animation: timeline2 1s infinite linear;
	animation: timeline2 1s infinite linear;
}

/* 动画 */

@-webkit-keyframes timeline2{
	0%{
		-webkit-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-webkit-transform: scale(1.1);
		opacity: 0;
	}
	}
	@-moz-keyframes timeline2{
	0%{
		-moz-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-moz-transform: scale(1.1);
		opacity: 0;
	}
	}
	@-ms-keyframes timeline2{
	0%{
		-ms-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-ms-transform: scale(1.1);
		opacity: 0;
	}
	}
	@-o-keyframes timeline2{
	0%{
		-o-transform: scale(0.1);
		opacity: 1;
	}
	100%{
		-o-transform: scale(1.1);
		opacity: 0;
	}
	}
	@keyframes timeline2{
	0%{
		transform: scale(0.1);
		opacity: 1;
	}
	100%{
		transform: scale(1.1);
		opacity: 0;
	}
}

最后来一小段jq让timeline能按年份折叠展开

$(function() {
	$('.show-hide').text('全部展开')

	$('..data .show').hide();
	$('.data .show:first').show(3000);
	$('.data .years').click(function() {
		$(this).next().slideToggle('fast');
		return false;
	});

	$('.show-hide').click(function() {
		var $this = $(this);
		var strText = $this.text();
		if (strText == '全部展开' ) {
			$('.data .show').show(1000);
			$this.text('全部折叠')
		}else {
			$('.data .show').hide(1000);
			$this.text('全部展开')
		}
	});

});

效果

点我查看