HTML
<div class="container">
<div class="orbit">
<div class="nebu"></div>
<div class="nebu3"></div>
<div class="circ">
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
<div class="c4"></div>
<div class="c5"></div>
<div class="c6"></div>
</div>
<div class="fugaz">
<div class="star"></div>
<div class="star pink"></div>
</div>
</div>
</div>
CSS
body{
background:black;
}
.container{
position:relative;
width:400px;
height:300px;
background:#090909;
margin:172px auto;
overflow:hidden;
}
.orbit{
position:absolute;
transform:scale(.75);
margin:35px 50px;
}
.circ{
position:absolute;
width:212px;
height:212px;
border-radius:100%;
background-image: linear-gradient(0deg, #1285ea 0%, #962161 100%);
border:5px solid #330060;
margin:45px 90px
}
.c1{
position:absolute;
width:50px;
height:12px;
border-radius:9px;
background:#9E3A83;
margin:30px 80px
}
.c1::before{
content:"";
position:absolute;
width:30px;
height:9px;
border-radius:9px;
background:#9E3A83;
margin:-9px 0px
}
.c2{
position:absolute;
width:50px;
height:12px;
border-radius:9px;
background:#4C3182;
margin:60px 121px
}
.c2::before{
content:"";
position:absolute;
width:30px;
height:9px;
border-radius:9px;
background:#4C3182;
margin:12px 12px
}
.c3{
position:absolute;
width:50px;
height:12px;
border-radius:9px;
background:#9C7BC4;
margin:75px 21px
}
.c3::before{
content:"";
position:absolute;
width:43px;
height:9px;
border-radius:9px;
background:#9C7BC4;
margin:12px 12px
}
.c3::after{
content:"";
position:absolute;
width:73px;
height:12px;
border-radius:9px;
background:#9C7BC4;
margin:21px 12px
}
.c4{
position:absolute;
width:50px;
height:12px;
border-radius:9px;
background:#635BB7;
margin:112px 121px
}
.c4::before{
content:"";
position:absolute;
width:43px;
height:9px;
border-radius:9px;
background:#635BB7;
margin:12px 12px
}
.c4::after{
content:"";
position:absolute;
width:73px;
height:12px;
border-radius:9px;
background:#635BB7;
margin:21px -12px
}
.c5{
position:absolute;
width:50px;
height:12px;
border-radius:9px;
background:#223891;
margin:182px 70px
}
.c5::before{
content:"";
position:absolute;
width:30px;
height:9px;
border-radius:9px;
background:#223891;
margin:-9px 21px
}
.c6{position:absolute;
width: 60px;
height: 150px;
border-top: 9px solid #eaeaea;
border-left: 9px solid transparent;
border-right: 9px solid transparent;
border-radius: 132px / 100px;
transform:rotate(-45deg);
margin: 12px 53px;
opacity:.5
}
.nebu{
position:absolute;
width: 300px;
height:30px;
border-radius:30px;
background-image: linear-gradient(12deg, #070707 0%, #212121 100%);
margin:70px 50px;
}
.nebu::before{
content:"";
position:absolute;
width: 261px;
height:30px;
border-radius:30px;
background-image: linear-gradient(to left, #434343 0%, #121212 100%);
margin:30px 12px;
}
.nebu::after{
content:"";
position:absolute;
width: 291px;
height:30px;
border-radius:30px;
background-image: linear-gradient(12deg, #070707 0%, #212121 100%);
margin:53px -3px;
}
.nebu3{
position:absolute;
width: 370px;
height:30px;
border-radius:30px;
background-image: linear-gradient(to left, #434343 0%, #121212 100%);
margin:152px 9px;
}
.nebu3::before{
content:"";
position:absolute;
width: 271px;
height:30px;
border-radius:30px;
background-image: linear-gradient(12deg, #070707 0%, #212121 100%);
margin:30px 50px;
}
.nebu3::after{
content:"";
position:absolute;
width: 251px;
height:30px;
border-radius:30px;
background-image: linear-gradient(to left, #434343 0%, #121212 100%);
margin:53px 60px;
}
.fugaz{
position:absolute;
margin:-192px 231px;
z-index:3333;
}
.stars{
position:relative;
display:block;
width: 9em;
height:6em;
background:black;
overflow:hidden;
margin:-90px auto;
}
.star {
display:block;
width:5px;
height:5px;
border-radius:50%;
background:#308bdb;
top:12px;
left:70px;
position:relative;
transform-origin:100% 0;
animation:star-ani 6s infinite ease-out;
box-shadow:0 0 5px 5px rgba(255,255,255,.3);
opacity:0;
}
.star:after {
content:'';
display:block;
top:0px;
left:4px;
border:0px solid #fff;
border-width:0px 90px 2px 90px;
border-color:transparent transparent transparent rgba(255,255,255, .3);
transform:rotate(-45deg) translate3d(1px,3px, 0);
box-shadow:0 0 1px 0 rgba(255,255,255,.3);
transform-origin:0% 100%;
}
.pink {
top:0px;
left:95px;
background:#d0378c;
animation-delay:5s;
}
.pink::after {
border-color:transparent transparent transparent #d0378c ;
animation-delay:5s;
}
.blue {
top:35px;
left:132px;
background:#0e8af7;
animation-delay:7s;
}
.blue::after{
border-color:transparent transparent transparent #0e8af7;
animation-delay:7s;
}
@-webkit-keyframes star-ani {
0% {
opacity:0;
transform:scale(0) rotate(0) translate3d(0, 0, 0);}
50% {
opacity:1;
transform:scale(1) rotate(0) translate3d(-200px, 200px, 0);}
100% {
opacity:0;
transform:scale(1) rotate(0) translate3d(-300px, 300px, 0);}
}
