css实现自适应时间轴时间线大事记效果代码-html代码-BFW代码库

css实现自适应时间轴时间线大事记效果代码

代码语言：html

所属分类：响应式

代码描述：css实现自适应时间轴时间线大事记效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
<style>
  body {
	margin:0;
	padding:0;
	background:#e6e6e6;
	color:#323232;
	font-family:'Open Sans',sans-serif;
	font-size:112.5%;
	line-height:1.6em
}
.timeline {
	position:relative;
	width:660px;
	margin:0 auto;
	margin-top:20px;
	padding:1em 0;
	list-style-type:none
}
.timeline:before {
	position:absolute;
	left:50%;
	top:0;
	content:' ';
	display:block;
	width:6px;
	height:100%;
	margin-left:-3px;
	background:#505050;
	background:-moz-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
	background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(30,87,153,1)),color-stop(100%,rgba(125,185,232,1)));
	background:-webkit-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
	background:-o-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
	background:-ms-linear-gradient(top,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
	background:linear-gradient(to bottom,rgba(80,80,80,0) 0,#505050 8%,#505050 92%,rgba(80,80,80,0) 100%);
	z-index:5
}
.timeline li {
	padding:1em 0
}
.timeline li:after {
	content:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.direction-l {
	position:relative;
	width:300px;
	float:left;
	text-align:right
}
.direction-r {
	position:relative;
	width:300px;
	float:right
}
.flag-wrapper {
	position:relative;
	display:inline-block;
	text-align:center
}
.flag {
	position:relative;
	display:inline;
	background:#f8f8f8;
	padding:6px 10px;
	border-radius:5px;
	font-weight:600;
	text-align:left
}
.direction-l .flag {
	-webkit-box-shadow:-1px 1px 1px rgba(0,0,0,0.15),0 0 1px rgba(0,0,0,0.15);
	-moz-box-shadow:-1px 1px 1px rgba(0,0,0,0.15),0 0 1px rgba(0,0,0,0.15);
	box-shadow:-1px 1px 1px rgba(0,0,0,0.15),0 0 1px rgba(0,0,0,0.15)
}
.direction-r .flag {
	-webkit-box-shadow:1px 1px 1px rgba(0,0,0,0.15),0 0 1px rgba(0,0,0,0.15);
	-moz-box-shadow:1px 1px 1px rgba(0,0,0,0.15),0 0 1px rgba(0,0,0,0.15);
	box-shadow:1px 1px 1px rgba(0,0,0,0.15),0 0 1px rgba(0,0,0,0.15)
}
.direction-l .flag:before,.direction-r .flag:before {
	position:absolute;
	top:50%;
	right:-40px;
	content:' ';
	display:block;
	width:12px;
	height:12px;
	margin-top:-10px;
	background:#fff;
	border-radius:10px;
	border:4px solid #ff5050;
	z-index:10
}
.direction-r .flag:before {
	left:-40px
}
.direction-l .flag:after {
	content:"";
	position:absolute;
	left:100%;
	top:50%;
	height:0;
	width:0;
	margin-top:-8px;
	border:solid transparent;
	border-left-color:#f8f8f8;
	border-width:8px;
	pointer-events:none
}
.direction-r .flag:after {
	content:"";
	position:absolute;
	right:100%;
	top:50%;
	height:0;
	width:0;
	margin-top:-8px;
	border:solid transparent;
	border-right-color:#f8f8f8;
	border-width:8px;
	pointer-events:none
}
.time-wrapper {
	display:inline;
	line-height:1em;
	font-size:.66666em;
	color:#fa5050;
	vertical-align:middle
}
.direction-l .time-wrapper {
	float:left
}
.direction-r .time-wrapper {
	float:right
}
.time {
	display:inline-block;
	padding:4px 6px;
	background:#f8f8f8
}
.desc {
	margin:1em .75em 0 0;
	font-size:.77777em.........完整代码请登录后点击上方下载按钮下载查看