|
@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} |
|
} |