CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#0B0921;
margin:90px auto;
padding-top:231px
}
.circ{
position:relative;
width:300px;
height:300px;
border-radius:100%;
background:rgba(73,21,64,.3);
margin: 0 auto;
}
.circ::before{
content:"";
position:absolute;
width:271px;
height:271px;
border-radius:100%;
background-image: linear-gradient(to top, #251644 12%, #660036 100%);
margin: 16px 16px
}
.circ3{
position:absolute;
width:30px;
height:30px;
border-radius:100%;
background-image: linear-gradient(300deg, #231557 0%, #44007c 21%, #FF1362 100%);
margin: 192px 70px;
}
.circ3::before{
content:"";
position:absolute;
width:70px;
height:70px;
border-radius:100%;
background-image: linear-gradient(300deg, #231557 0%, #FF1362 100%);
opacity:.12;
margin: -53px 90px;
}
.circ3::after{
content:"";
position:absolute;
width:50px;
height:50px;
border-radius:100%;
background-image: linear-gradient(300deg, #231557 0%, #FF1362 100%);
opacity:.05;
margin: 21px 50px;
}
.arc{
position:absolute;
width: 450px;
height: 300px;
border-top: 7px solid rgba(73,21,64,.3);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-radius: 231px / 100px;
transform:rotate(21deg);
margin:80px 132px;
animation: color 3s alternate infinite;
}
.arc3{
position:absolute;
width: 450px;
height: 300px;
border-bottom: 7px solid rgba(73,21,64,.9);
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-radius: 231px / 100px;
transform:rotate(21deg);
margin:-102px -47px;
animation: color3 3s linear infinite;
}
.circ7{
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background-image: linear-gradient(300deg, #231557 0%, #44007c 21%, #FF1362 100%);
margin: -50px 90px;
}
.circ7::before{
content:"";
position:absolute;
width:12px;
height:12px;
border-radius:100%;
background-image: linear-gradient(300deg, #231557 0%, #44007c 21%, #FF1362 100%);
margin: -30px 30px;
}
.circ7::after{
content:"";
position:absolute;
width:21px;
height:21px;
border-radius:100%;
background-image: linear-gradient(300deg, #231557 0%, #44007c 21%, #FF1362 100%);
margin: 350px -30px;
}
.arc7{
position:absolute;
width: 121px;
height: 150px;
border-top: 12px solid #ddd;
border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-radius: 121px / 100px;
transform:rotate(-30deg);
margin:30px 70px;
}
ul{
position:absolute;
margin:-30px 0;
text-decoration:none;
}
ul li{
display:inline-block;
}
.star {
display: block;
position: absolute;
margin:-121px 152px;
width: 30px;
height: 30px;
background: #F6F6F6;
transform:scale(.7);
overflow: hidden;
z-index: 2;
animation: glitter 4.5s linear 0s infinite normal;
}
.star-top,.star-bottom{
position: relative;
display: block;
}
.star-top:before ,
.star-top:after ,
.star-bottom:before ,
.star-bottom:after{
content: "";
width: 30px;
height: 30px;
background:#0B0921;
border-radius: 50%;
position: absolute;
}
.star-top:before {
top: -16px;
left: -16px;
}
.star-top:after {
bottom: -14px;
left: 16px;
}
.star-bottom:before {
top: 16px;
left: -16px;
}
.star-bottom:after {
top: 16px;
left: 16px;
}
ul li:nth-child(1){
margin:30px 12px;
transform:scale(.5);
}
ul li:nth-child(2){
margin:33px 0px;
transform:scale(.6)
}
@keyframes color{
0%{border-top: 21px solid rgba(100,13,122,.3);}
50%{border-top: 21px solid rgba(100,13,122,.9);}
100%{border-top: 21px solid rgba(100,13,122,.3);}
}
@keyframes color3{
0%{border-bottom: 21px solid rgba(100,13,122,.7);}
50%{border-bottom: 21px solid rgba(100,13,122,.3);}
100%{border-bottom: 21px solid rgba(100,13,122,.7);}
}
@keyframes glitter {
0% {transform: scale(0.7); opacity: 1; }
25% {transform: scale(0.5); opacity: 0; }
50% {transform: scale(0.7); opacity: 1; }
75% {transform: scale(0.5); opacity: 0; }
100% {transform: scale(0.7); opacity: 1; }
}
