<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;
mask:
conic-gradient(from -90deg at 80% 80%,#000 90deg,#0000 0),
conic-gradient(from 90deg at 20% 20%,#0000 90deg,#000 0);
mask-size:50px 50px;
mask-position:center;
mask-composite: source-out;
mask-composite: subtract;
animation:f 4s infinite alternate linear;
}
@keyframes f {
100% {background-position:100% 100%}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.