SCSS
$nb-star: 400;
$width-app: 600px;
$width-center: $width-app*0.4;
$width-container: $width-app*0.5;
$width-star-max: $width-center*0.25;
$width-star-min: $width-star-max*0.25;
$animation-speed: 1500ms;
$colors: #348cb2 #4897b9 #5ca3c1 #70aec9 #85bad0 #99c5d8 #add1e0 #c2dce7 #d6e8ef #eaf3f7 #ffffff #348cb2 #2e7ea0 #29708e #24627c #1f546a #1a4659 #143847 #0f2a35 #0a1c23 #e5d10f #e7d526 #eada3e #ecde57 #efe36f #f2e887 #f4ec9f #f7f1b7 #f9f5cf #fcfae7 #132087 #111c79 #0f196c #0d165e #0b1351 #091043 #070c36 #050928 #03061b #01030d #000000 #03061b #01030d #03061b #01030d #03061b #01030d;
@mixin transform($transforms) {
transform: $transforms;
-o-transform: $transforms;
-ms-transform: $transforms;
-moz-transform: $transforms;
-webkit-transform: $transforms;
}
@mixin translate($valX, $valY) {
@include transform(translate($valX, $valY));
}
@mixin rotate($deg) {
@include transform(rotate($deg));
}
@mixin keyframes($name) {
@keyframes #{$name} { @content };
@-o-keyframes #{$name} { @content };
@-moz-keyframes #{$name} { @content };
@-webkit-keyframes #{$name} { @content };
}
body {
background-color: black;
overflow: hidden;
}
.app {
background-color: black;
position: absolute;
left: 50%; top: 50%;
margin-left: -$width-app/2;
margin-top: -$width-app/2;
width: $width-app;
height: $width-app;
border-radius: 50%;
border: solid white 1px;
overflow: hidden;
.center {
z-index: 100;
position: absolute;
left: 50%; top: 50%;
margin-left: -$width-center/2;
margin-top: -$width-center/2;
width: $width-center;
height: $width-center;
border-radius: 50%;
background-image: radial-gradient(circle $width-center at 50% 50%, rgba(0,0,0,1) 0, rgba(0,0,0,1) $width-center/2*0.50, rgba(0,0,0,0) $width-center/2*1);
//border: solid 1px green;
}
.container {
position: absolute;
left: 50%; top: 50%;
width: $width-container;
height: 1px;
transform-origin: left 50%;
.star {
border-radius: 50%;
background-color: white;
animation-name: hyperspace;
animation-duration: $animation-speed;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
}
.cockpit {
z-index: 200;
position: absolute;
width: $width-app;
height: $width-app;
top: calc(50% - $width-app/2);
left: calc(50% - $width-app/2);
border: solid green 1px;
background: url("http://img.swcombine.com//ships/124/cockpit.gif") center no-repeat;
background-size: $width-app;
}
}
@for $i from 0 through $nb-star {
.container:nth-child(#{$i}) {
.star {
animation-delay: #{random($animation-speed)}ms;
$colorKey: random(47);
background-color: nth($colors, $colorKey);
$r: $width-star-max - $width-star-min + 1;
$width-star: random($r) + $width-star-min - 1;
width: $width-star;
height: $width-star / 10;
} @include rotate(0deg + random(360));
}
}
@include keyframes(hyperspace) {
0% { margin-left: 0px; }
100% { margin-left: $width-container*1.1; }
}
