inspiration: http://i.imgur.com/pLRMp8k.gif
A Pen by Nils Schönwald on CodePen.
- parts = 6 | |
- 10.times do | |
.ring | |
- parts.times do | |
.part | |
- parts = parts + 6 |
@import "compass"; | |
$si: 500px; //size | |
$ri: 10; //rings | |
$pa: 6; //number of parts in smalest ring | |
$ti: 3.5s; //twistingtime | |
body { background: black; } | |
.ring { | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
width: 0; | |
height: 0; | |
} | |
@for $i from 1 through $ri { | |
$ra: $si / $ri * .5 * $i; | |
$de: ($ti / $ri) *.5 * $i; | |
$ring: $i; | |
$rt: ($i / $pa) * 300s; | |
.ring:nth-child(2n) { | |
animation: ring#{1}#{$ring} $rt linear infinite; | |
} | |
@keyframes ring#{1}#{$ring} { | |
from { transform: rotate(0); } | |
to { transform: rotate(360deg); } | |
} | |
.ring:nth-child(2n + 1) { | |
animation: ring#{2}#{$ring} $rt linear infinite; | |
} | |
@keyframes ring#{2}#{$ring} { | |
from { transform: rotate(0); } | |
to { transform: rotate(-360deg); } | |
} | |
@for $i from 1 through $pa { | |
$an: 360deg / $pa; | |
$y: sin($an * $i) * $ra; | |
$x: cos($an * $i) * $ra; | |
$part: $i; | |
.ring:nth-child(#{$ring}) .part:nth-child(#{$i}) { | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: $si / ($ri * 2 + 1) * .8; | |
height: $si / ($ri * 2 + 1) * .2; | |
margin: $si / ($ri * 2 + 1) * -.1 $si / ($ri * 2 + 1) * -.4; | |
background: #f00; | |
transform: translate($y,$x) rotate($an * -$i); | |
animation: ring#{$ring}part#{$part} $ti $de linear infinite; | |
} | |
.ring:nth-child(2n).ring:nth-child(#{$ring}) .part:nth-child(#{$i}) { | |
animation: ring#{2n}#{$ring}part#{$part} $ti $de linear infinite; | |
} | |
@keyframes ring#{$ring}part#{$part} { | |
0% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i); } | |
5%, 25% { background: #03d831; transform: translate($y,$x) rotate($an * -$i - 90); } | |
30%, 50% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i - 180); } | |
55%, 75% { background: #03d831; transform: translate($y,$x) rotate($an * -$i - 270); } | |
80%, 100% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i - 360); } | |
} | |
@keyframes ring#{2n}#{$ring}part#{$part} { | |
0% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i); } | |
5%, 25% { background: #03d831; transform: translate($y,$x) rotate($an * -$i + 90); } | |
30%, 50% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i + 180); } | |
55%, 75% { background: #03d831; transform: translate($y,$x) rotate($an * -$i + 270); } | |
80%, 100% { background: #ee3400; transform: translate($y,$x) rotate($an * -$i + 360); } | |
} | |
} | |
$pa: $pa + 6; | |
} |
inspiration: http://i.imgur.com/pLRMp8k.gif
A Pen by Nils Schönwald on CodePen.