Rainbow Illusion #2

JADE
.static - for (var i = 0; i < 50; i++) .el
SCSS
$size: 100px; $count: 50; $time: 8s; $delay: 0.2s; @mixin animation($name) { @keyframes #{$name} { @content; } } @include animation(tunnel) { 100% { transform: rotate(30deg) scale(20); } } body { overflow: hidden; background: #000; .static { position: absolute; top: 50%; left: 50%; width: $size; height: $size; margin-left: -$size/2; margin-top: -$size/2; border: 2px solid aqua; } .el { @extend .static; @for $i from 1 through $count{ &:nth-child(#{$i}){ border-color: hsl($i*70deg, 85%, 50%); animation: tunnel $time infinite; animation-timing-function: linear; animation-delay: $i*$delay; } } } }
JAVASCRIPT
Expand for more options Login