body {
/* essential styling */
height: calc(100vh - 1em);
background:
linear-gradient(var(--angle, 0deg),
#ff9800 50%, #3c3c3c 0);
&:after { /* just to prettify stuff */
/* use absolute positioning because
* margin: 0 on body
* breaks Edge for some reason */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
font: calc(16vmin + 3rem)/ 100vh Leckerli One,
cursive;
text-align: center;
cursor: pointer;
content: 'Click!';
@supports (mix-blend-mode: screen) {
/* in supports because
* background: inherit
* breaks Edge for some reason
* (sorry, I had no better idea) */
background: inherit;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
filter: invert(1) grayscale(1) contrast(3)
}
}
}
const NF = 50;
let rID = null, f = 0;
function stopAni() {
cancelAnimationFrame(rID);
rID = null;
};
function update() {
let k = ++f/NF;
document.body.style.setProperty(
'--angle',
`${+(k*180).toFixed(2)}deg`
);
if(!(f%NF)) {
f = f%(2*NF);
stopAni();
return;
}
rID = requestAnimationFrame(update);
};
addEventListener('click', e => {
if(!rID) update();
}, false);
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.