SCSS
$main-color: #e74c3c;
$size: 100px;
$circles: 5;
$timing: 2s;
$delay: .2s;
$cubic: cubic-bezier(0.895, 0.03, 0.685, 0.22);
@function top-shadow($depth) {
$primary-offset: nth(1.5 3 10 14 19, $depth) * 1px;
$blur: nth(1.5 3 10 14 19, $depth) * 4px;
$color: rgba(black, nth(.12 .16 .19 .25 .30, $depth));
@return 0 $primary-offset $blur $color;
}
@function bottom-shadow($depth) {
$primary-offset: nth(1.5 3 6 10 15, $depth) * 1px;
$blur: nth(1 3 3 5 6, $depth) * 4px;
$color: rgba(black, nth(.24 .23 .23 .22 .22, $depth));
@return 0 $primary-offset $blur $color;
}
@mixin card($depth) {
@if $depth < 1 {
box-shadow: none;
} @else if $depth > 5 {
@warn "Invalid $depth `#{$depth}` for mixin `card`.";
} @else {
box-shadow: bottom-shadow($depth), top-shadow($depth);
}
}
.circle {
height: $size; width: $size;
background: $main-color;
border-radius: 50%;
@for $i from 1 through $circles {
&:nth-child(#{$i}) {
animation: depth#{$i} $timing $delay*$i $cubic infinite alternate;
}
@at-root {
@keyframes depth#{$i} {
50%, 100% {
@include card($i);
}
}
}
}
}
html, body { height: 100%; }
body {
display: flex;
align-items: center;
justify-content: space-around;
background: $main-color;
}
