<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></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><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></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
body{
background: black;
}
@keyframes anima{
from{
transform: rotate(30deg);
opacity: .2;
}
to{
transform: rotate(-30deg);
opacity: 1;
}
}
.wrap{
position:absolute;
top:50%;
right:50%;
animation: animaWrap 50s ease infinite;
transform: translate(50%,-50%)
}
.wrap > div{
height: 50vh;
background: #2196F3;
width: 2px;
opacity: 0;
display: inline-block;
animation: anima 5s calc(var(--t)) ease infinite alternate;
}
@for $i from 0 to 150 {
div:nth-child(#{$i}) {
--t: #{$i} * 0.05s;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.