body, html {
  height: 100%;
}
body {
  color:white;
  position: relative;
  animation-name: example;
  animation-duration: 30s;
  animation-iteration-count: infinite;
  background-color:black;
  background-image:
    linear-gradient(217deg, rgba(255,0,0,.5), rgba(255,0,0,0) 70.71%),
    linear-gradient(127deg, rgba(0,255,0,.5), rgba(0,255,0,0) 70.71%),
    linear-gradient(336deg, rgba(0,0,255,.5), rgba(0,0,255,0) 70.71%),
    radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
    radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
    radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
    radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 400% 400%,400% 400%,400% 400%,550px 550px, 350px 350px, 250px 250px, 150px 150px; 
background-position: 0 0,0 0,0 0,0 0, 40px 60px, 130px 270px, 70px 100px;
}

@keyframes example {
  0%   {
    background-position-x: 0%;
    background-position-y: 0%;
  }
  25%  {
    background-position-x: 0%;
    background-position-y: 100%;
  }
  50%  {
    background-position-x: 100%;
    background-position-y: 100%;
  }
  75%  {
    background-position-x: 100%;
    background-position-y: 0%;
  }
  100%  {
    background-position-x: 0%;
    background-position-y: 0%;
  }
}