SCSS
/*variables*/
$starCount: 10;
$circleCount: 60;
$speed: 5; //second
$bg: #140032;
html,body{
width: 100%;height: 100%;
}
body{
background-color: $bg;
overflow: hidden;
margin:0;
*{
position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;border-radius:50%;
}
}
.stars{
width: 300px;height: 300px;
animation: 5s starsAnimation linear infinite;
.circle{
animation: #{$speed}s CircleAnimation linear infinite;
$w: 0;
@for $i from 1 through $circleCount{
$w: $w + 1;
@if($i%11==1){$w: 1;}
$index: ($i - 1)*360/$circleCount;
&:nth-child(#{$i}){
width: #{$w}px;height: #{$w}px;
background-color: hsl($index,100%,50%);
box-shadow: hsl($index,100%,50%) 0px 0px #{$w}px 1px;
animation-delay: -#{$speed/$circleCount*$i}s;
}
}
}
$scale: 0.2*$starCount;
@for $i from 1 through $starCount{
.star:nth-child(#{$i}){
transform: scale($scale);
}
$scale: $scale - 0.2;
}
}
$cords: ( (-150, 220), (0,135),(150,220),(120,67.5),(250,0),(120,-67.5),(150,-220),(0,-135),(-150, -220),(-120, -67.5),(-250,0),(-120,67.5),(-150, 220));
@keyframes CircleAnimation{
@for $i from 0 through 12{
$procent: $i*100/12;
#{$procent}%{
left: #{nth(nth($cords,($i + 1)),1)}px;
top: #{nth(nth($cords,($i + 1)),2)}px;
}
}
}
@keyframes starsAnimation{
100%{
transform: rotate(-360deg);
}
}
