Light Ball Pulse

HAML
.cont - (1..6).each do |i| .link .menu
SASS
$dim: 40px $c1: #36f1cd $c2: #111 $c3: #36f1cd $t: 1s @keyframes anim 50% transform: translateX(0) scale(0.7) filter: blur(0px) @keyframes rota 100% transform: rotate(360deg) body background-color: $c2 .cont height: $dim width: $dim margin: -$dim/2 auto position: relative top: 50vh animation: rota $t*7 infinite > div border-radius: 50% height: $dim width: $dim position: absolute mix-blend-mode: color-dodge filter: blur(20px) > .menu background-color: $c1 line-height: $dim text-align: center color: $c2 > .link background-color: $c3 animation: anim $t infinite @for $i from 1 through 6 .cont > .link:nth-child(#{$i}) transform: rotate($i*60deg) translateX($dim*0.7) background-color: adjust-hue($c3,$i*50)
JAVASCRIPT
Expand for more options Login