CSS：镜像Gradients欢迎

 

 

body{background: black radial-gradient(circle farthest-side at
calc(var(--mouseX, 1) * 1px)
calc(var(--mouseY, 1) * 1px),
hsl(var(--mouseX, 5), 75%, 75%),
hsl(var(--mouseY, 45), 75%, 75%)
);
}
html {height: 100%;font: 1em/1.5 sans-serif;}
body {display: flex;align-items: center;justify-content: center;min-height: 100%;margin: 0;}
body:after {content: 'move your mouse!';background: hsla(0, 0%, 0%, .3);color: #fff;padding: 10px;align-self: center;pointer-events: none;}

 

document.addEventListener('mousemove', function (e) {
    document.documentElement.style.setProperty('--mouseX', e.clientX);
    document.documentElement.style.setProperty('--mouseY', e.clientY);
});