Shadow Experiment

HAML
- 5.times do .circle
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; }
JAVASCRIPT
Expand for more options Login