利用css after伪元素制作时间线（步骤条）效果

最新推荐文章于 2024-04-19 05:49:50 发布

岳清流云

最新推荐文章于 2024-04-19 05:49:50 发布

阅读量593

点赞数 1

分类专栏： css HTML5 文章标签： css html css3

本文链接：https://blog.csdn.net/tdl081071tdy/article/details/109116453

版权

css 同时被 2 个专栏收录

3 篇文章 1 订阅

订阅专栏

HTML5

3 篇文章 0 订阅

订阅专栏

效果图如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 300px;
				height: 60px;
				border: solid 0px #ccc;
				margin: 10px;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			
			.dian{
				width: 10px;
				height: 10px;
				border-radius: 50%;
				border: solid 4px green;
				position: relative;
			}
			/* 中间的线条由伪元素绘制 */
			.dian::after{
				content: "";
				width: 2px;
				height: 55px;
				border: solid 0px red;
				background-color: #ccc;
				
				position: absolute;
				left: 0;
				right: 0;
				top: 14px;
				margin: auto;
			}
			
			.last::after{
				background-color: #fff;
			}
			
			.area{
				width: 80%;
				height: 100%;
				border: solid 1px red;
			}
			
		</style>
	</head>
	<body>
		
		<div class="wrap">
			<div class="dian"></div>
			<div class="area"></div>
		</div>
		
		<div class="wrap">
			<div class="dian"></div>
			<div class="area"></div>
		</div>
		
		<div class="wrap">
			<div class="dian"></div>
			<div class="area"></div>
		</div>
		
		<div class="wrap">
			<div class="dian"></div>
			<div class="area"></div>
		</div>
		
		<script type="text/javascript">
			// 这部分用于清除最后一个点的线条
			let alldian = document.querySelectorAll(".dian");
			alldian = Array.from(alldian);
			alldian[alldian.length-1].classList.add("last")
		</script>
	</body>
</html>

岳清流云

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
利用css after伪元素制作时间线（步骤条）效果

效果图如下<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .wrap{ width: 300px; height: 60px; border: soli
复制链接

扫一扫