Squares Party

HAML
.container - (1..10).each do .row - (1..13).each do .squares
SCSS
$width: 30px; $height: 30px; $squares: 50; * { margin: 0; padding: 0; box-sizing: border-box; } html, body { background: #222; overflow: hidden; } .container { display: flex; justify-content: center; height: 100vh; align-items: center; width: 100vw; flex-direction: column; } .row { float: left; margin: 10px 0; } .squares { width: $width; height: $height; float: left; margin: 0 10px; opacity: 1; animation: party .7s 10000ms linear infinite; } @for $i from 1 through $squares { .squares:nth-of-type(#{$i}) { background: rgba(random(254), random(255), random(255), random(1)); } .squares:nth-of-type(#{$i}) { animation-delay: $i / $squares + s; } } @keyframes party { 0% { opacity: 1; transform: rotate(0deg); } 50% { opacity: 0; transform: rotate(45deg); } 100% { opacity: 1; transform: rotate(90deg); } }
JAVASCRIPT
Expand for more options Login