<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);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.