CSS3垂直虚线时间轴特效

最新推荐文章于 2022-09-07 14:54:00 发布

livana.

最新推荐文章于 2022-09-07 14:54:00 发布

阅读量580

点赞数

分类专栏：前端学习文章标签： css3 javascript jquery

本文链接：https://blog.csdn.net/weixin_43898383/article/details/119053824

版权

学习同时被 2 个专栏收录

30 篇文章 2 订阅

订阅专栏

前端

7 篇文章 0 订阅

订阅专栏

这是一个使用CSS3创建的垂直虚线时间轴特效示例。包含2016年至2019年的四个时间点，每个点展示了不同的Web技术主题，如Web开发、Web设计和JavaScript。通过响应式框架和图标库实现美化，适用于前端展示项目的时间线布局。

摘要由CSDN通过智能技术生成

index.html

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>CSS3垂直虚线时间轴特效</title>
	
	<!--响应式框架-->
	<link rel="stylesheet" type="text/css" href="css/bootstrap-grid.min.css" />
	
	<!--图标库-->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

	<!--主要样式-->
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	
</head>
<body>

<div class="demo">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="main-timeline">
					<div class="timeline">
						<a href="#" class="timeline-content">
							<div class="timeline-year">
								<span>2019</span>
							</div>
							<div class="timeline-icon">
								<i class="fa fa-rocket"></i>
							</div>
							<h3 class="title">Web Development</h3>
							<p class="description">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
							</p>
						</a>
					</div>
					<div class="timeline">
						<a href="#" class="timeline-content">
							<div class="timeline-year">
								<span>2018</span>
							</div>
							<div class="timeline-icon">
								<i class="fa fa-globe"></i>
							</div>
							<h3 class="title">Web Designing</h3>
							<p class="description">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
							</p>
						</a>
					</div>
					<div class="timeline">
						<a href="#" class="timeline-content">
							<div class="timeline-year">
								<span>2017</span>
							</div>
							<div class="timeline-icon">
								<i class="fa fa-user"></i>
							</div>
							<h3 class="title">Java Script</h3>
							<p class="description">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
							</p>
						</a>
					</div>
					<div class="timeline">
						<a href="#" class="timeline-content">
							<div class="timeline-year">
								<span>2016</span>
							</div>
							<div class="timeline-icon">
								<i class="fa fa-rocket"></i>
							</div>
							<h3 class="title">Web Development</h3>
							<p class="description">
								Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer males uada tellus lorem, et condimentum neque commodo
							</p>
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
	
</body>
</html>