html {
  height: 100%;
  
  background-color: hsla(87,50%,50%,1);
  
  background-image:
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      ),
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      ),
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      ),
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      ),
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      ),
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      ),
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      ),
    radial-gradient(
      white 30%,
      hsla(0,40%,100%,0) 35%
      );
  
  background-position: 
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%,
    50% 50%;
  background-size: 1.5em 1.5em;
  background-repeat: no-repeat;
  
  animation: bloom 2.5s infinite;
  }

@keyframes bloom {
  6.25% {
    background-position: 
      50% calc(50% - 1.5em),
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%;    
    }
  12.5% {
    background-position: 
      50% calc(50% - 1.5em),
      calc(50% + 1em) calc(50% - 1em),
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%;    
    }
  18.75% {
    background-position: 
      50% calc(50% - 1.5em),
      calc(50% + 1em) calc(50% - 1em),
      calc(50% + 1.5em) 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%;    
    }
  25% {
    background-position: 
      50% calc(50% - 1.5em),
      calc(50% + 1em) calc(50% - 1em),
      calc(50% + 1.5em) 50%,
      calc(50% + 1em) calc(50% + 1em),
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%;    
    }
  31.25% {
    background-position: 
      50% calc(50% - 1.5em),
      calc(50% + 1em) calc(50% - 1em),
      calc(50% + 1.5em) 50%,
      calc(50% + 1em) calc(50% + 1em),
      50% calc(50% + 1.5em),
      50% 50%,
      50% 50%,
      50% 50%;    
    }
  37.5% {
    background-position: 
      50% calc(50% - 1.5em),
      calc(50% + 1em) calc(50% - 1em),
      calc(50% + 1.5em) 50%,
      calc(50% + 1em) calc(50% + 1em),
      50% calc(50% + 1.5em),
      calc(50% - 1em) calc(50% + 1em),
      50% 50%,
      50% 50%;    
    }
  43.75% {
    background-position: 
      50% calc(50% - 1.5em),
      calc(50% + 1em) calc(50% - 1em),
      calc(50% + 1.5em) 50%,
      calc(50% + 1em) calc(50% + 1em),
      50% calc(50% + 1.5em),
      calc(50% - 1em) calc(50% + 1em),
      calc(50% - 1.5em) 50%,
      50% 50%;    
    }
  50% {
    background-position: 
      50% 50%,
      calc(50% + 1em) calc(50% - 1em),
      calc(50% + 1.5em) 50%,
      calc(50% + 1em) calc(50% + 1em),
      50% calc(50% + 1.5em),
      calc(50% - 1em) calc(50% + 1em),
      calc(50% - 1.5em) 50%,
      calc(50% - 1em) calc(50% - 1em);    
    }
  56.25% {
    background-position: 
      50% 50%,
      50% 50%,
      calc(50% + 1.5em) 50%,
      calc(50% + 1em) calc(50% + 1em),
      50% calc(50% + 1.5em),
      calc(50% - 1em) calc(50% + 1em),
      calc(50% - 1.5em) 50%,
      calc(50% - 1em) calc(50% - 1em);    
    }
  62.5% {
    background-position: 
      50% 50%,
      50% 50%,
      50% 50%,
      calc(50% + 1em) calc(50% + 1em),
      50% calc(50% + 1.5em),
      calc(50% - 1em) calc(50% + 1em),
      calc(50% - 1.5em) 50%,
      calc(50% - 1em) calc(50% - 1em);    
    }
  68.75% {
    background-position: 
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% calc(50% + 1.5em),
      calc(50% - 1em) calc(50% + 1em),
      calc(50% - 1.5em) 50%,
      calc(50% - 1em) calc(50% - 1em);    
    }
  75% {
    background-position: 
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      calc(50% - 1em) calc(50% + 1em),
      calc(50% - 1.5em) 50%,
      calc(50% - 1em) calc(50% - 1em);    
    }
  81.25% {
    background-position: 
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      calc(50% - 1.5em) 50%,
      calc(50% - 1em) calc(50% - 1em);    
    }
  87.5% {
    background-position: 
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      50% 50%,
      calc(50% - 1em) calc(50% - 1em);    
    }
  }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js