当前位置:

HTML5+CSS3 响应式垂直时间轴

本文最后更新于2015-05-04,已超过 1年没有更新,如果文章内容、图片或者下载资源失效,请留言反馈,我会及时处理,谢谢!

温馨提示:本文共2142个字,读完预计6分钟。

今天利用空余时间做了一个响应式的时间轴demo,在手机上显示比较不错。想看效果请点击下方result。

源码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<meta name="author" content="haibao"/>
	<meta name="url" content="http://www.hehaibao.com/html5-css3-timeline"/>
	<title>HTML5+CSS3 响应式垂直时间轴demo</title>
	<style>
		body{font-size:100%;background-color:#f2f2f2;}
		html,body,ul{margin:0;padding:0;overflow-x:hidden;}
		li{list-style:none;}
		a{color:#333;text-decoration:none;}
		p{line-height:22px;}
		h1{margin:2em 0;color:#333;text-align:center;font-size:1.2em;}
		#timeline-box{position:relative;padding:1em 0;margin:2em 0;}
		#timeline-box:before{-webkit-animation:move-to-down 1.4s;content:'';position:absolute;top:0;left:18px;width:4px;height:100%;background-color:#d7e4ed;}
		#timeline-box li:before{-webkit-animation:move-to-right 1.2s;content:'';width:20px;height:20px;line-height:20px;color:#fff;text-align:center;background-color:#d7e4ed;border-radius:50%;position:absolute;left:10px;}
		#timeline-box li:nth-child(even):before{background-color:#5bc0de;}
		#timeline-box li{margin:2em 0 2em 3em;}
		.content{-webkit-animation:move-to-left 1.2s;position:relative;background-color:#fff;color:#999;padding:1em;margin-right:1em;box-shadow:4px 6px 10px #ddd;-webkit-box-shadow:4px 6px 10px #ddd;}
		.content:before{content:'';position:absolute;top:5px;left:-8px;display:block;width:0;height:0;border-top:8px solid transparent;border-bottom: 8px solid transparent;border-right: 8px solid #fff;}
		.title{font-size:1.2em;color:#666;line-height:22px;}
		.read-more{width:100%;overflow:hidden;margin-top:20px;}
		.read-more time{color:#999;float:left;line-height:32px;}
		.read-more a{float:right;display:block;padding:8px;background-color:#d7e4ed;color:#fff;border-radius:5px;}
		#timeline-box li:nth-child(even) .read-more a{background-color:#5bc0de;}
		@-webkit-keyframes move-to-right{
			0% {left:-1000px;}
			100% {left:0;}
		}
		@-webkit-keyframes move-to-left{
			0% {right:-2000px;}
			100% {right:0;}
		}
		@-webkit-keyframes move-to-down{
			0% {top:-3000px;}
			100% {top:0;}
		}
	</style>
</head>
<body>
	<h1>HTML5+CSS3 响应式垂直时间轴</h1>
	<ul id="timeline-box">
		<li>
			<div class="content">
				<a href="#" class="title">HTML5+CSS3响应式垂直时间轴</a>
				<p>
					网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本篇将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB应用。
				</p>
				<div class="read-more">
					<time>2015-05-01</time>
					<a href="#">阅读全文</a>
				</div>
			</div>
		</li>
		<li>
			<div class="content">
				<a href="#" class="title">HTML5+CSS3响应式垂直时间轴</a>
				<p>
					本篇将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB应用。
				</p>
				<div class="read-more">
					<time>2015-05-02</time>
					<a href="#">阅读全文</a>
				</div>
			</div>
		</li>
		<li>
			<div class="content">
				<a href="#" class="title">HTML5+CSS3实现的响应式垂直时间轴</a>
				<p>
					网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。
				</p>
				<div class="read-more">
					<time>2015-05-03</time>
					<a href="#">阅读全文</a>
				</div>
			</div>
		</li>
		<li>
			<div class="content">
				<a href="#" class="title">HTML5+CSS3实现的响应式垂直时间轴</a>
				<p>
					网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。适用于HTML5开发的PC和移动手机WEB应用。
				</p>
				<div class="read-more">
					<time>2015-05-04</time>
					<a href="#">阅读全文</a>
				</div>
			</div>
		</li>
	</ul>
</body>
</html>
版权申明:本文地址 ,本博客所有文章除特别声明外,均采用署名-非商业性使用-禁止演绎 4.0 国际 许可协议。请尊重他人的劳动成果!

我要说两句