HTML
<div class="stars-container">
<div class="stars">
<div></div><div></div><div></div>
</div>
<div class="stars">
<div></div><div></div><div></div>
</div>
<div class="stars">
<div></div><div></div><div></div>
</div>
<div class="stars">
<div></div><div></div><div></div>
</div>
<div class="stars-2"></div>
<div class="stars-2"></div>
<div class="stars-2"></div>
</div>
<div class="moon"></div>
<div class="planet-container">
<div class="planet-ring2"></div>
<div class="planet"></div>
<div class="shine"></div>
<div class="shine-2"></div>
<div class="planet-ring"></div>
<div class="planet-crater"></div>
</div>
<div class="meteor-container">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
<div class="meteor-container-2">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
SCSS
@import 'compass/css3';
$purple1 : #181743;
$purple2 : #730F8E;
$purple-pink:#A21190;
$pink : #EA3281;
$purple-pink1: #CE0682;
$blue: #6E81E3;
$light-pink: #eb6db4;
$fuscia : #f9026d;
$meteor-yellow: #fedc01;
@mixin keyframes($animationName) {
@-webkit-keyframes #{"$animationName"} {
@content;
}
@-moz-keyframes #{$animationName} {
@content;
}
@-ms-keyframes #{$animationName} {
@content;
}
@keyframes #{$animationName} {
@content;
}
}
body {
background:$purple1;
overflow:hidden;
}
.planet-container {
width:200px;
height:200px;
padding:20px;
@include border-radius(200px);
@include background(linear-gradient(150deg, $fuscia, transparent,transparent));
position: absolute;
@include animation(planet-moving 2s ease infinite);
@include transition(all 0.2s ease);
left: 42%;
.shine {
width: 0;
height: 0;
position:absolute;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-top: 28px solid $light-pink;
@include border-radius(50%);
@include transform(rotate(-40deg));
top: 45px;
left: 38px;
&::after {
content:"";
position:absolute;
@include background(linear-gradient(190deg,#c90779, #770e8d, #35145a));
height:160px;
width:160px;
@include border-radius(100px);
left: -78px;
top: -16px;
}
} //end of shine
.shine-2 {
position: absolute;
width: 13px;
height: 11px;
background: #eb6db4;
@include border-radius(100px);
top: 65px;
left: 45.5px;
@include transform(rotate(-55deg));
&::after {
@extend .shine-2;
content: "";
top: 9px;
left: 43.5px;
transform: rotate(206deg);
width: 12px;
height: 10px;
}
&::before {
content :"";
position:absolute;
height:10px;
width:14px;
background:$light-pink;
@include border-radius(200px);
top: 24px;
left: 60px;
@include transform(rotate(40deg));
}
}
.planet-ring {
width:300px;
height:40px;
position:absolute;
border-top: 10px solid transparent;
border-bottom: 10px solid $fuscia;
border-left: 10px solid $fuscia;
border-right: 10px solid $fuscia;
@include border-radius(100%);
left: -40px;
transform: rotate(-30deg);
top: 80px;
&::after {
}
}
.planet-ring2 {
@extend .planet-ring;
border-top:10px solid $fuscia;
z-index:-1
}
.planet {
width:200px;
height:200px;
@include background(linear-gradient(150deg, $fuscia, $purple2, transparent));
@include border-radius(100px);
} //end of planet
} //end of planet-container
.stars-container {
position:absolute;
width: 50%;
height: 50%;
left: 50%;
top: 50%;
@include transform(translate(-50%,-50%));
.stars {
width:170px;
top: 140px;
position: relative;
left: 220px;
div:nth-child(1) {
width:20px;
position:relative;
height: 6px;
@include border-radius(100%);
background:#fff;
@include animation(twinkle-width 1s ease infinite);
}
div:nth-child(2) {
width:6px;
height:20px;
top:-5px;
position:absolute;
background:#fff;
@include border-radius(100%);
left:7px;
top: -7px;
transform-origin:middle;
@include animation(twinkle-height 1s ease infinite);
}
div:nth-child(3) {
background:#fff;
content: "";
position:absolute;
width:10px;
height:10px;
left: 5px;
top:-2px;
@include border-radius(100px);
}
}
.stars:nth-child(2) {
position:relative;
@include transform(scale(0.8));
top:60px;
left:80px;
div {
@include animation-delay(0.5s);
}
}
.stars:nth-child(3) {
position:relative;
@include transform(scale(0.6));
top:20px;
left: 150px;
div {
@include animation-delay(0.5s);
}
}
.stars:nth-child(4) {
position:relative;
@include transform(scale(0.5));
top:-50px;
left: 350px;
div {
@include animation-delay(0.8s);
}
}
.stars-2 {
@include border-radius(100%);
position: absolute;
@include animation(twinkle 0.5s ease infinite);
}
.stars-2:nth-child(5) {
width:10px;
height:10px;
@include background(linear-gradient(to right, $purple2, transparent));
left: 150px;
top:120px;
@include animation-delay(0.2s);
}
.stars-2:nth-child(6) {
width:10px;
height:10px;
@include background(linear-gradient(to right, transparent, $pink));
left: 420px;
top:-50px;
}
.stars-2:nth-child(7) {
width:8px;
height:8px;
@include background(linear-gradient(to right, transparent, $purple2));
left: 350px;
top:-70px;
@include animation-delay(0.8s);
@include animation-duration(1s);
}
}
.meteor-container {
position:absolute;
width:auto;
height:auto;
top:800px;
left:550px;
@include animation(meteor-drop 2s ease infinite);
@include animation-delay(2s);
@include transform(rotate(40deg));
opacity:0;
div {
@include transition(all 0.3s ease);
}
div:nth-child(1) {
@include background(linear-gradient(to top, $purple2, transparent));
height:150px;
width:20px;
@include border-radius(100px);
opacity: 0.8;
position:absolute;
left: -5.5px;
top: -96px;
z-index:-2
}
div:nth-child(2) { //meteor second tail
width:12px;
height:100px;
@include background(linear-gradient(to top, $fuscia, transparent));
@include border-radius(500px);
position:absolute;
opacity:0.8;
left:-1.5px;
top:-53px;
}
div:nth-child(3) { //meteor circle
width:8px;
height:8px;
background:$meteor-yellow;
@include border-radius(100px);
top: 35px;
position:absolute;
z-index:2;
}
div:nth-child(4) { //meteor tail
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 5px solid transparent;
border-bottom: 30px solid $meteor-yellow;
z-index:1;
top:8px;
position:absolute;
}
}
.meteor-container-2 {
position:absolute;
width:auto;
height:auto;
top:900px;
left:650px;
@include animation(meteor-drop2 2.5s ease infinite);
@include animation-delay(3s);
@include transform(rotate(40deg) scale(0.9));
opacity:0;
div {
@include transition(all 0.3s ease);
}
div:nth-child(1) {
@include background(linear-gradient(to top, $purple2, transparent));
height:150px;
width:20px;
@include border-radius(100px);
opacity: 0.8;
position:absolute;
left: -5.5px;
top: -96px;
z-index:-2
}
div:nth-child(2) { //meteor second tail
width:12px;
height:100px;
@include background(linear-gradient(to top, $fuscia, transparent));
@include border-radius(500px);
position:absolute;
opacity:0.8;
left:-1.5px;
top:-53px;
}
div:nth-child(3) { //meteor circle
width:8px;
height:8px;
background:$meteor-yellow;
@include border-radius(100px);
top: 35px;
position:absolute;
z-index:2;
}
div:nth-child(4) { //meteor tail
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 5px solid transparent;
border-bottom: 30px solid $meteor-yellow;
z-index:1;
top:8px;
position:absolute;
}
}
.moon {
width:100px;
height:100px;
@include border-radius(100%);
@include background(linear-gradient(150deg, $blue 55%, $fuscia 98%));
position:absolute;
top: 30%; left: 35%;
@include animation(planet-moving2 2s ease infinite);
@include animation-delay(0.5s);
}
@include keyframes(meteor-drop) {
0% {
opacity:0;
top:50px;
left:1250px;
}
50% {
opacity:1;
}
100% {
left:800px;
top:550px;
opacity:0;
}
}
@include keyframes(meteor-drop2) {
0% {
opacity:0;
top:150px;
left:1350px;
}
50% {
opacity:1;
}
100% {
left:900px;
top:650px;
opacity:0;
}
}
@include keyframes(planet-moving) {
0%{top:30%}
50%{top:31%}
100%{top:30%}
}
@include keyframes(planet-moving2) {
0%{top:30%}
50%{top:31%}
100%{top:30%}
}
@include keyframes(twinkle-height) {
0% { height: 20px;top:-7px}
50% { height: 10px; top:-3px}
100% { height: 20px;top:-7px}
}
@include keyframes(twinkle-width) {
0% { width: 20px;left:0px}
50% { width: 10px; left:5px}
100% { width: 20px;left:0px}
}
@include keyframes(twinkle) {
0%{opacity:0}
50%{opacity:1}
100%{opacity:0}
}
