<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<style>
* {
padding:0px;
margin:0px;
}
body {
transform:scale(0.4)
}
.da {
margin-top:10%;
margin-left:30%;
width:400px;
height:400px;
border:1px solid #000000;
position:relative;
display:flex;
border-radius:50%;
animation:rot 10s infinite linear;
}
.hong{
width:50px;
height:50px;
background-color:red;
border-radius:50%;
margin:auto;
}
.xiaoquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-100px -100px 0 0;
}
.lan {
width:40px;
height:40px;
background-color:#0026ff;
margin:auto;
margin-left:80px;
border-radius:50%;
}
.wuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-50px -50px 0 0;
}
.cheng {
width:30px;
height:30px;
background-color:#ff6a00;
margin:auto;
border-radius:50%;
}
.lv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:40px 0 0 -10px;
border-radius:50%;
}
.xiaquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:100px 100px 0 0;
}
.xiawuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:50px 50px 0 0;
}
.xialv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:-10px 0 0 40px;
border-radius:50%;
}
.zuoquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-100px 300px 0 0;
}
.zuowuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-50px 150px 0 0;
}
.zuolv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:40px 0 0 90px;
border-radius:50%;
}
.shangquan {
width:200px;
height:200px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-300px 100px 0 0;
}
.shangwuquan {
width:100px;
height:100px;
border:1px solid #000000;
position:absolute;
top:50%;
right:0;
display: flex;
border-radius:50%;
animation:rot 10s infinite linear;
margin:-150px 50px 0 0;
}
.shanglv {
width:20px;
height:20px;
background-color:#4cff00;
position:absolute;
margin:90px 0 0 40px;
border-radius:50%;
}
@keyframes rot {
100% {transform:rotate(360deg) }
}
</style>
</head>
<body>
<div class="da">
<div class="hong"></div>
<div class="xiaoquan">
<div class="lan"></div>
<div class="wuquan">
<div class="cheng"></div>
<div class="lv"></div>
</div>
</div>
<div class="xiaquan">
<div class="lan"></div>
<div class="xiawuquan">
<div class="cheng"></div>
<div class="xialv"></div>
</div>
</div>
<div class="zuoquan">
<div class="lan"></div>
<div class="zuowuquan">
<div class="cheng"></div>
<div class="zuolv"></div>
</div>
</div>
<div class="shangquan">
<div class="lan"></div>
<div class="shangwuquan">
<div class="cheng"></div>
<div class="shanglv"></div>
</div>
</div>
</div>
</body>
</html>
