Pure css3 Star

body, html {
height: 100%;
width: 100%;
background-color: black;
}

.container {
height: 100%;
width: 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;
width: 50px;
transform-style: preserve-3d;
}

.star .item {
height: 100%;
width: 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;
width: 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;
width: 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;
width: 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;
width: 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;
width: 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;
width: 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;
width: 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;
width: 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;
width: 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>

Reproduced in: https: //www.cnblogs.com/-maomao/p/5445577.html

Guess you like