Planets

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} }
JAVASCRIPT
Expand for more options Login