HTML
<div class="stars stars--1"></div>
<div class="stars stars--2"></div>
<div class="stars stars--3"></div>
<div class="stars stars--4"></div>
<div class="stars stars--5"></div>
<div class="stars stars--6"></div>
<div class="stars stars--7"></div>
<div class="stars stars--8"></div>
<div class="stars stars--9"></div>
<div class="stars stars--10"></div>
<div class="stars stars--11"></div>
<div class="stars stars--12"></div>
<div class="stars stars--13"></div>
<div class="stars stars--14"></div>
<div class="stars stars--15"></div>
<div class="stars stars--16"></div>
<div class="stars stars--17"></div>
<div class="stars stars--18"></div>
<div class="stars stars--19"></div>
<div class="stars stars--20"></div>
SCSS
$color: blue;
$transp: transparent;
$time: 35s;
$max: 15;
$step: $time/$max;
$sizes: 5em, 7em, 9em, 11em;
$debug: null;
//-----------------------------------------------
@function getRandPerc(){
$rand-val: random();
$perc: percentage($rand-val/100);
@if( $perc < 5 ){
$perc: $perc + 10;
}
@if( $perc > 95 ){
$perc: $perc - 10;
}
@return $perc;
}
//-----------------------------------------------
@function getPlace(){
$output: null;
$w-place: getRandPerc();
$h-place: getRandPerc();
$output: $w-place $h-place;
@return $output;
}
//-----------------------------------------------
@function gradients(){
$output: null;
@for $i from 1 through length($sizes) {
$current-color: lighten($color, $i*10);
$grad: radial-gradient( #{$i*2}em at getPlace(),
$current-color .3%, $transp 2.5%
);
$output: append($output, $grad, comma);
}
@return $output;
}
//-----------------------------------------------
@function getSizes($index: 1){
$output: null;
@each $sz in $sizes{
$item: $sz;
$output: append($output, $item*$index $item*$index, comma);
}
@return $output;
}
//-----------------------------------------------
@mixin printStars(){
@for $i from 1 through $max {
.stars--#{$i} {
background: gradients();
background-position: center center;
background-size: getSizes();
animation-delay: -$step*$i;
animation-duration: $time - $i*.3;
}
}
}
//-----------------------------------------------
HTML,
BODY {
height: 100%;
}
BODY {
background-color: black;
font-size: 10px;
}
.stars {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
animation: bg $time linear infinite;
}
@include printStars;
@keyframes bg{
100% {
background-size: getSizes(20);
transform: rotateZ(180deg);
}
}
1 Response