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);
}
}
