StrictThemes - WordPress Themes

Fancy Color Orb with Mix-Blend-Modes

HAML
.loader - (1..50).each do %div .mixer
SASS
$c1: #222 $c2: #ce8147 $dim: 200px $t: 8s $d: $t / 200 @keyframes loader 50% transform: rotate(180deg) body margin: 0 background-color: $c1 .loader, .mixer height: $dim width: $dim position: relative top: 50vh margin: -$dim/2 auto border-radius: 50% overflow: hidden transform: rotate(45deg) .loader > div width: $dim/50 height: $dim*2 margin: -$dim/2 0 0 0 float: left animation: loader $t infinite filter: blur(2px) mix-blend-mode: overlay @for $i from 1 through 100 .loader > div:nth-child(#{$i}) background-color: adjust-hue($c2,$i*6) animation-delay: $i * $d .mixer border: 1px solid white margin: -$dim auto background-color: #fff mix-blend-mode: overlay transform: scale(0.5)
JAVASCRIPT
Expand for more options Login