<div class="wrap">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
body{
background: #E0F7FA;
}
@keyframes anima{
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
@keyframes animaWrap{
from{
transform: translate(50%,-50%) rotate(300deg);
}
to{
transform: translate(50%,-50%) rotate(0deg);
}
}
.wrap{
position:absolute;
top:50%;
right:50%;
animation: animaWrap 50s ease infinite;
}
.wrap > div{
width: 5px;
height: 50px;
background: #0097A7;
margin:1px;
opacity: 1;
display: inline-block;
animation: anima 1s calc(var(--t)) ease infinite;
}
@for $i from 0 to 150 {
div:nth-child(#{$i}) {
--t: #{$i} * 0.01s;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.