digital text
HTML
<div class="classGrid">
<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 class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class=""></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div></div>
<div></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div class=""></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></div>
<div></div>
<div class="selected"></div>
<div class="selected"></div>
<div class="selected"></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>
SCSS
.classGrid {
display: grid;
justify-content: center;
grid-gap: 1px;
grid-template-columns: repeat(21, 1fr);
grid-template-rows: repeat(7, 1fr);
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
> div {
text-align: center;
cursor: pointer;
overflow: hidden;
padding: 4px;
background: #111;
border-radius: 10%;
border: 1px solid #222;
}
// When a grid item is selected, run the animation
.selected {
animation: anims 5s linear infinite;
}
}
// Generate nth-child animation-delay rules using a loop
@for $i from 1 through 148 {
.classGrid > div:nth-child(#{$i}) {
animation-delay: #{($i * 0.01s)};
}
}