<div id="bg-block"></div>
body{
margin: 0;
}
#bg-block{
width: 910px;
display: flex;
flex-wrap: wrap;
margin: auto;
span{
display: block;
border: 25px solid #E91E63;
height: 100px;
width: 100px;
border-radius: 50%;
margin: -24px;
box-sizing: border-box;
box-shadow: inset 0 0 20px 10px #880E4F;
background-color: #880E4F;
&:nth-child(even){
z-index: 1;
opacity: 0;
}
&:nth-child(34n+4),
&:nth-child(34n+8),
&:nth-child(34n+12),
&:nth-child(34n+16),
&:nth-child(34n+19),
&:nth-child(34n+23),
&:nth-child(34n+27),
&:nth-child(34n+31)
{
opacity: 1;
z-index: 2;
box-shadow: 0 0 20px 10px #880E4F;
animation: beatBumps 2s ease infinite;
&:before{
content: '';
height: 100%;
width: 100%;
background: inherit;
display: block;
border-radius: inherit;
border: 15px solid white;
box-sizing: border-box;
background: black;
}
}
&:nth-child(34n+4),
&:nth-child(34n+8),
&:nth-child(34n+12),
&:nth-child(34n+16){
animation: beatBumps 2s 0.5s ease infinite;
}
}
}
@keyframes beatBumps{
0%{
}
30%{
transform: scale(1.15);
}
35%{
transform: scale(1);
}
45%{
transform: scale(1.15);
}
100%{
transform: scale(1);
}
}
View Compiled
var bgBlock = document.getElementById('bg-block');
for(var x = 1; x <= 255; x++) {
var span = document.createElement("span");
bgBlock.appendChild(span);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.