css 五环模型

最新推荐文章于 2024-04-27 16:48:56 发布

liulu璐

最新推荐文章于 2024-04-27 16:48:56 发布

阅读量181

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_43566612/article/details/107327178

版权

方式一：

比较笨着，但可以基本实现，看个人需求进行修改。

（每个环分别进行定位）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>hello</title>
		<link rel="stylesheet" type="text/css" href="css/55.css" />

	</head>
	<body>
		<div class="ring1"></div>
		<div class="ring2"></div>
		<div class="ring3"></div>
		<div class="ring4"></div>
		<div class="ring5"></div>
	</body>
	<!DOCTYPE html>
</html>

*{
	margin: 0;
	padding: 0;
}
div{
	width: 100px;
	height: 100px;
	border-radius: 50%;
	opacity: 0.5;
	left: 50%;
	top: 50%;
}
.ring1{
	position: fixed;
    margin-left: -50px;
	margin-top: -85px;
	z-index: 3;
	border: 2px solid black;
}
.ring2{
	position: fixed;
	margin-left: -130px;
	margin-top: -85px;
	border: 2px solid red;
}
.ring3{
	position: fixed;
	margin-left: 30px;
	margin-top: -85px;
	border: 2px solid blue;
}
.ring4{
	position: fixed;
	margin-left: -10px;
	margin-top: -15px;
	border: 2px solid green;
}
.ring5{
	position: fixed;
	margin-left: -90px;
	margin-top: -15px;
	border: 2px solid yellow;
}

改进方式二：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>五环</title>
		<link rel="stylesheet" type="text/css" href="./1.css"/>
	</head>
	<body>
		<div class="plat">
			<div class="ring1"></div>
			<div class="ring2"></div>
			<div class="ring3"></div>
			<div class="ring4"></div>
			<div class="ring5"></div>

		</div>
	</body>
</html>

*{
	margin: 0px;
	padding: 0px;
}

.ring1,
.ring2,
.ring3,
.ring4,
.ring5{
	position: absolute;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: black 10px solid;	
	
}
.ring2{
	z-index: 3;
	left: 130px;
	border: red 10px solid;	
}
.ring3{
	
	left: 260px;
	border: yellow 10px solid;	
}
.ring4{
	
	left: 65px;
	top: 60px;
	border: green 10px solid;
}
.ring5{
	
	left: 195px;
	top: 60px;
	border: blue 10px solid;
}
.plat{
    text-align: center;
	line-height: 180px;
	position: absolute;
	margin-top:-90px ;
	margin-left:-190px ;
	left:50% ;
	top: 50%;
	width: 380px;
	height: 180px;
}

效果：

liulu璐

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 五环模型

方式一：比较笨着，但可以基本实现，看个人需求进行修改。（每个环分别进行定位）<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>hello</title> <link rel="stylesheet" type="text/css" href="css/55.css" /> </head> <body&
复制链接

扫一扫