<style><!--
* {
box-sizing: border-box;
padding: 0px;
margin: 0px;
}
body, html {
height: 100%;
100%;
background-color: black;
}
.container {
height: 100%;
1200px;
margin: auto;
position: relative;
transform: rotateX(-25deg);
transform-style: preserve-3d;
}
.line {
position: absolute;
border-radius: 50%;
transform-style: preserve-3d;
}
.star {
position: absolute;
height: 50px;
50px;
transform-style: preserve-3d;
}
.star .item {
height: 100%;
100%;
border-radius: 50%;
position: absolute;
opacity: 0.3;
}
.star .item:nth-child(2) {
transform: rotateY(30deg);
}
.star .item:nth-child(3) {
transform: rotateY(60deg);
}
.star .item:nth-child(4) {
transform: rotateY(90deg);
}
.star .item:nth-child(5) {
transform: rotateY(120deg);
}
.star .item:nth-child(6) {
transform: rotateY(150deg);
}
.star .item:nth-child(7) {
transform: rotateY(180deg);
}
.sun {
height: 100px;
100px;
left: 550px;
top: 300px;
animation: zizhuan 40s linear infinite;
}
.sun .item {
border: 2px dotted red;
background: radial-gradient(yellow,red);
}
.one_line {
height: 300px;
300px;
left: 450px;
top: 200px;
border: 2px dotted red;
animation: gongzhuang 12s linear infinite;
}
.one {
top: -25px;
left: 125px;
animation: zizhuan 10s linear infinite;
}
.one .item {
border: 2px dotted red;
}
.two_line {
height: 400px;
400px;
left: 400px;
top: 150px;
border: 2px dotted red;
animation: gongzhuang 24s linear infinite;
}
.two {
top: -25px;
left: 175px;
animation: zizhuan 10s linear infinite;
}
.two .item {
border: 2px dotted orange;
}
.thr_line {
height: 500px;
500px;
left: 350px;
top: 100px;
border: 2px dotted red;
animation: gongzhuang 36s linear infinite;
}
.thr {
top: -25px;
left: 225px;
animation: zizhuan 10s linear infinite;
}
.thr .item {
border: 2px dotted yellow;
}
.four_line {
height: 600px;
600px;
left: 300px;
top: 50px;
border: 2px dotted red;
animation: gongzhuang 48s linear infinite;
}
.four {
top: -25px;
left: 275px;
animation: zizhuan 10s linear infinite;
}
.four .item {
border: 2px dotted green;
}
.five_line {
height: 700px;
700px;
left: 250px;
top: 0px;
border: 2px dotted red;
animation: gongzhuang 60s linear infinite;
}
.five {
top: -25px;
left: 325px;
animation: zizhuan 10s linear infinite;
}
.five .item {
border: 2px dotted blue;
}
.six_line {
height: 800px;
800px;
left: 200px;
top: -50px;
border: 2px dotted red;
animation: gongzhuang 84s linear infinite;
}
.six {
top: -25px;
left: 375px;
animation: zizhuan 10s linear infinite;
}
.six .item {
border: 2px dotted cyan;
}
.seven_line {
height: 900px;
900px;
left: 150px;
top: -100px;
border: 2px dotted red;
animation: gongzhuang 96s linear infinite;
}
.seven {
top: -25px;
left: 425px;
animation: zizhuan 10s linear infinite;
}
.seven .item {
border: 2px dotted purple;
}
.eight_line {
height: 1000px;
1000px;
left: 100px;
top: -150px;
border: 2px dotted red;
animation: gongzhuang 108s linear infinite;
}
.eight {
top: -25px;
left: 475px;
animation: zizhuan 10s linear infinite;
}
.eight .item {
border: 2px dotted pink;
}
@keyframes gongzhuang {
from {
transform: rotateY(0deg) rotateX(90deg);
}
to {
transform: rotateY(360deg) rotateX(90deg);
}
}
@keyframes zizhuan {
to {
transform: rotateZ(360deg);
}
}
--></style>
<div class="container">
<div class="sun star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
<div class="one_line line">
<div class="one star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="two_line line">
<div class="two star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="thr_line line">
<div class="thr star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="four_line line">
<div class="four star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="five_line line">
<div class="five star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="six_line line">
<div class="six star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="seven_line line">
<div class="seven star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="eight_line line">
<div class="eight star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
<div class="nine_line line">
<div class="nine star">
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
<div class="item"> </div>
</div>
</div>
</div>