Galaxy planet

HTML
<div class="container"> <div class="arc"></div> <div class="circ"> <div class="circ3"></div> <div class="arc3"></div> <div class="circ7"></div> <div class="arc7"></div> <ul> <li><div class="star"><div class="star-top"></div><div class="star-bottom"></div></div></li> <li><div class="star"><div class="star-top"></div><div class="star-bottom"></div></div></li> </ul> </div> </div>
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; } }
JAVASCRIPT
Expand for more options Login