<div class="full"></div>
.full {
  position:fixed;
  inset:0;
  z-index:801;
  display: flex;
  background:linear-gradient(-60deg,#F7F799,#E0D124,#F0823F,#BD374C,#443A37,#4E3E34,#5E976E,#D2E78F,#FCE99F) 0 0/400% 400%;
  animation:f 4s infinite alternate -2s linear;
}
.full:before {
  content:"";
  flex:1;
  background-image:inherit;
  background-size:inherit;
  background-position:0 0;
  -webkit-mask:
      conic-gradient(from -90deg at 80% 80%,#000 90deg,#0000 0),
      conic-gradient(from  90deg at 20% 20%,#0000 90deg,#000 0);
  -webkit-mask-size:50px 50px;
  -webkit-mask-position:center;
  -webkit-mask-composite: source-out;
  mask-composite: subtract;
  animation:f 4s infinite alternate linear;
}

@keyframes f {
  100% {background-position:100% 100%}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.