CSS实现五环

效果预览
在这里插入图片描述
这是某个机构教学视频的练习题，在练习的时候，我的本身代码如下:
wh.html

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>标题</title>
	<link rel="stylesheet" type="text/css" href="sy2.css">
</head>
<body>
	<span>
		<div class="blue"></div>
		<div class="yellow"></div>
		<div class="black"></div>
		<div class="green"></div>
		<div class="red"></div>
	</span>
</body>
</html>

wh.css

span{
	position: fixed;
	left: 50%;
	right: 50%;
	width: 750px;
	height: 325px;
	margin-left: -325px;
	margin-right: -325px;
}
*{
	margin: 0;
	padding: 0;
}
.blue{
	z-index: 0;
	border:15px solid blue;
	width: 200px;
	height: 200px;
	border-radius: 200;
}
.yellow{
	z-index:1;
	position: absolute;
	top: 125px;
	left: 125px;
	border:15px solid yellow;
	width: 200px;
	height: 200px;
	border-radius: 200;
}
.black{
	z-index:0;
	position: absolute;
	top:0px;
	left: 275px;
	border:15px solid black;
	width: 200px;
	height: 200px;
	border-radius: 200;
}
.green{
	z-index:1;
	position: absolute;
	top:125px;
	left: 425px;
	border:15px solid green;
	width: 200px;
	height: 200px;
	border-radius: 200;
}
.red{
	z-index:0;
	position: absolute;
	top:0px;
	left: 550px;
	border:15px solid red;
	width: 200px;
	height: 200px;
	border-radius: 200;
}

代码优化完成后的结果：
wh.html

<html lang="en">
<head>
	<meta charset="utf-8">
	<title>标题</title>
	<link rel="stylesheet" type="text/css" href="sy2.css">
</head>
<body>
	<div class="plat">
		<div class="circle1"></div>
		<div class="circle2"></div>
		<div class="circle3"></div>
		<div class="circle4"></div>
		<div class="circle5"></div>
	</div>
</body>
</html>

wh.css

*{
	margin: 0;
	padding: 0;
}
.plat{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -190px;
	margin-top:-93px;
	border: 5px solid black;
	height: 185px;
	width: 380px;
}
.circle1,
.circle2,
.circle3,
.circle4,
.circle5{
	position: absolute;
	width: 100px;
	height: 100px;
	border: 10px solid black;
	border-radius: 50%;
}
.circle1{
	border-color: red;
	left: 0;
	top: 0;
}
.circle2{
	border-color: green;
	left: 130px;
	top:0;
}
.circle3{
	border-color: blue;
	left: 260px;
	top:0;
}
.circle4{
	border-color: yellow;
	left: 65px;
	top:70px;

}
.circle5{
	border-color: purple;
	left:195px;
	top:70px; 
}

yucan1234

发布了11 篇原创文章 · 获赞 0 · 访问量 166

私信关注

猜你喜欢