SCSS
$max-color-steps: 20;
$step: 360/$max-color-steps;
$color-main: rgba(0,0,0, .1);
$color-transp: transparentize($color-main, 1);
$img-size-int: 120;
$li-size: 35px;
$line: 12;
$max: 48;
BODY {
background: white;
font: 12px/1.4 "Trebuchet MS", Arial, sans-serif;
}
A {
color: tomato;
}
.links {
margin-top: 3em;
text-align: center;
color: darken(tan, 25%)
}
.wrapper {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 250px;
margin: auto;
width: $li-size*$line;
}
.wrapper,
UL {
&:after {
content: "";
display: table;
width: 100%;
clear: both;
}
}
UL {
height: 250px;
margin-bottom: 30px;/*
background: ivory;*/
}
LI {
position: relative;
float: left;
top: 0;
width: $li-size;
height: $li-size;
border-radius: 50%;
transition: .5s;
animation: jump 4s infinite;
&:before,
&:after {
content: "";
display: block;
position: absolute;
left: 50%;
width: 7px;
height: 7px;
margin-left: -5px;
border-radius: 50%;
border: 1px solid currentColor;
}
&:before {
top: -15px;
}
&:after {
bottom: -15px;
}
}
@keyframes jump {
50% {
top: 45%;
transform: rotate(360deg);
}
}
/* Nth-child
-------------------- */
@mixin img($color){
$color-step: 20;
$size: random(15) + $img-size-int+40;
$color-1: $color;
$color-2: adjust-hue($color, $color-step*2);
$color-3: adjust-hue($color, $color-step);
$color-4: adjust-hue($color, $color-step*3);
background-image: repeating-radial-gradient(
$color-1, $color-1 10%,
$color-2 12%, $color-2 20%,
$color-3 22%, $color-3 30%,
$color-4 32%, $color-4 40%
);
}
@mixin colors(){
@for $i from 1 through $max-color-steps {
LI:nth-child(#{$max-color-steps}n + #{$i}) {
$color: hsl(($i - 1)*$step, 80%, 60%);
@include img($color);
color: $color;
/* animation-delay: -#{$i/3}s; */
}
}
}
@mixin delays(){
$lines: 4;
@for $i from 1 through $max {
$lines-num: 12;
$pos: $i % $lines-num;
$l-num: floor(($i - 1)/$lines-num);
$delay: $pos / 3 + $l-num;
LI:nth-child(#{$max}n + #{$i}) {
animation-delay: -#{$delay}s;
}
}
}
@include colors;
@include delays;
