<div class="full"></div>
.full {
position:fixed;
inset:0;
z-index:336;
display: flex;
filter:blur(3px) contrast(15) hue-rotate(260deg);
background:#ffff;
}
.full:before {
content: "";
flex: 1;
background: #ff00ff;
-webkit-mask:
linear-gradient(60deg,#0000 40%,#000,#0000 60%),
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: 500% 500%,30px 30px,30px 30px;
-webkit-mask-position: 0 0,center,center;
-webkit-mask-composite: xor,destination-atop;
mask-composite:exclude,subtract;
animation:f 4s infinite linear;
}
@keyframes f {
80%,100% {-webkit-mask-position:100% 100%,center,center}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.