如何用html和css画出三个同心圆
展开全部
/这是我没完成的一个小玩意，不过能满足你的需求
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.box{
width: 600px;
height: 600px;
position: relative;
margin-top: 30%;
}
.round1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: #b9d1f5;
border: 1px solid #808aa2;
overflow: hidden;
z-index: 10;
}
.round1 .child{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(0,0,0,0);
border: #808aa2 1px solid;
}
.round1 .child:nth-child(1){
transform-origin:100% 50%;
transform: rotate(30deg);
z-index: 8;
}
.round1 .child:nth-child(2){
transform-origin:100% 50%;
transform: rotate(60deg);
z-index: 8;
}
.round1 .child:nth-child(3){
transform-origin:100% 50%;
transform: rotate(90deg);
z-index: 8;
}
.round1 .child:nth-child(4){
transform-origin:100% 50%;
transform: rotate(120deg);
z-index: 8;
}
.round1 .child:nth-child(5){
transform-origin:100% 50%;
transform: rotate(150deg);
z-index: 8;
}
.round2{
position: absolute;
top: 12.5%;
left: 12.5%;
width: 75%;
height: 75%;
border-radius: 100%;
background: #b3b0fb;
border: 1px solid #808aa2;
z-index: 100;
}
.round3{
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border-radius: 100%;
background: #ebbbff;
border: 1px solid #808aa2;
z-index: 200;
}
.round4{
position: absolute;
top: 37.5%;
left: 37.5%;
width: 25%;
height: 25%;
border-radius: 100%;
background: #ff91e5;
border: 1px solid #2c8a33;
z-index: 300;
}
</style>
</head>
<body>
<div class="box">
<!---->
<div class="round1">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<!---->
<!---->
<div class="round2">
</div>
<!---->
<!---->
<div class="round3">
</div>
<!---->
<!---->
<div class="round4">
</div>
<!---->
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.box{
width: 600px;
height: 600px;
position: relative;
margin-top: 30%;
}
.round1{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 100%;
background: #b9d1f5;
border: 1px solid #808aa2;
overflow: hidden;
z-index: 10;
}
.round1 .child{
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background: rgba(0,0,0,0);
border: #808aa2 1px solid;
}
.round1 .child:nth-child(1){
transform-origin:100% 50%;
transform: rotate(30deg);
z-index: 8;
}
.round1 .child:nth-child(2){
transform-origin:100% 50%;
transform: rotate(60deg);
z-index: 8;
}
.round1 .child:nth-child(3){
transform-origin:100% 50%;
transform: rotate(90deg);
z-index: 8;
}
.round1 .child:nth-child(4){
transform-origin:100% 50%;
transform: rotate(120deg);
z-index: 8;
}
.round1 .child:nth-child(5){
transform-origin:100% 50%;
transform: rotate(150deg);
z-index: 8;
}
.round2{
position: absolute;
top: 12.5%;
left: 12.5%;
width: 75%;
height: 75%;
border-radius: 100%;
background: #b3b0fb;
border: 1px solid #808aa2;
z-index: 100;
}
.round3{
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border-radius: 100%;
background: #ebbbff;
border: 1px solid #808aa2;
z-index: 200;
}
.round4{
position: absolute;
top: 37.5%;
left: 37.5%;
width: 25%;
height: 25%;
border-radius: 100%;
background: #ff91e5;
border: 1px solid #2c8a33;
z-index: 300;
}
</style>
</head>
<body>
<div class="box">
<!---->
<div class="round1">
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>
<!---->
<!---->
<div class="round2">
</div>
<!---->
<!---->
<div class="round3">
</div>
<!---->
<!---->
<div class="round4">
</div>
<!---->
</div>
</body>
</html>
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
