HTML
<div class="wrapper">
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
<div class="item-7"></div>
<div class="item-8"></div>
<div class="item-9"></div>
<div class="item-10"></div>
<div class="item-11"></div>
<div class="item-12"></div>
<div class="item-13"></div>
<div class="item-14"></div>
<div class="item-15"></div>
<div class="item-16"></div>
<div class="item-17"></div>
<div class="item-18"></div>
<div class="item-19"></div>
<div class="item-20"></div>
<div class="item-21"></div>
<div class="item-22"></div>
<div class="item-23"></div>
<div class="item-24"></div>
<div class="item-25"></div>
<div class="item-26"></div>
<div class="item-27"></div>
<div class="item-28"></div>
<div class="item-29"></div>
<div class="item-30"></div>
<div class="item-31"></div>
<div class="item-32"></div>
<div class="item-33"></div>
<div class="item-34"></div>
<div class="item-35"></div>
<div class="item-36"></div>
<div class="item-37"></div>
<div class="item-38"></div>
<div class="item-39"></div>
<div class="item-40"></div>
<div class="item-41"></div>
<div class="item-42"></div>
<div class="item-43"></div>
<div class="item-44"></div>
<div class="item-45"></div>
<div class="item-46"></div>
<div class="item-47"></div>
<div class="item-48"></div>
<div class="item-49"></div>
<div class="item-50"></div>
</div>
SCSS
$border-radius: 0%;
$animation-duration: 5s;
$rotate: 20deg;
$skewX: 50deg;
html, body {
background: #222;
overflow: hidden;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.wrapper {
width: 300px;
height: 300px;
position: relative;
}
.wrapper div {
width: 300px;
height: 300px;
border-radius: $border-radius;
position: absolute;
}
@for $i from 1 through 50 {
.item-#{$i}{
border: 4px solid hsla($i*15, 80, 60, 0.7);
animation: anim-#{$i} $animation-duration 1s linear infinite alternate;
}
@keyframes anim-#{$i} {
to {
transform:
rotate($i*$rotate)
skewX($skewX);
border-width: 4px;
}
}
}
