<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>霓虹灯</title>
<style>
body{display:grid;place-items:center;overflow:hidden;margin:0;height:100vh;background-image:linear-gradient(45deg,#223,#112);background:radial-gradient(at 100% 0,#fff2,#fff0 50%),radial-gradient(at 0% 100%,#0002,#0000 50%),#545153}@property --x{syntax:'<angle>';inherits:true;initial-value:1deg}@property --c{syntax:'<color>';inherits:true;initial-value:#0000}.neon{--x:1deg;--c:#0000;font-size:3rem;appearance:none;position:relative;aspect-ratio:2;border-radius:100em;background:linear-gradient(to bottom right,#0001,#0000),#444143;width:3em;box-shadow:inset 0 0 0.25em -0.25em #0008,inset 0.05em 0.05em 0.2em #000811,inset -0.05em -0.05em 0.15em 0.05em #ccc1,0 0 0 0.11em #545153;transition:--x 0.5s,--c 0.35s,box-shadow 0.5s;filter:drop-shadow(0 0 0.2em var(--c));cursor:pointer;&::before{content:"";position:absolute;height:80%;aspect-ratio:1;top:50%;left:25%;transform:translate(-50%,-50%);background:#545153;box-shadow:inset -0.05em -0.05em 0.1em #0008,inset 0.05em 0.05em 0.1em #ffffff22,inset 0.05em 0em 0.1em -0.065em var(--c),0.1em 0.1em 0.15em #000c;border-radius:50%;transition:left 0.5s,box-shadow 0.15s}&::after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:calc(100% + 0.25em);height:calc(100% + 0.25em);border:0.1em solid #0ff;border-radius:100em;-webkit-mask:conic-gradient(from calc(270deg - var(--x)),#000 calc(2 * var(--x)),#0001 0);box-shadow:0 0 0 2em #0000}&:hover{--x:3deg;--c:#0ff5;box-shadow:inset 0 0 0.25em -0.25em #0008,inset 0.05em 0.05em 0.2em #000811,inset -0.05em -0.05em 0.15em 0.05em #ccc1,0 0 0.05em 0.075em #545153}&:checked{--x:180deg;--c:#0fff;box-shadow:inset 0 0 0.25em -0.25em #0008,inset 0.05em 0.05em 0.2em #000811,inset -0.05em -0.05em 0.15em 0.05em #ccc1,0 0 0.1em 0.05em #545153;&::before{left:75%;box-shadow:inset -0.05em -0.05em 0.1em #0008,inset 0.05em 0.05em 0.1em #ffffff22,inset -0.05em 0em 0.1em -0.035em var(--c),0.1em 0.1em 0.15em #000c}}&[disabled]{opacity:0.25}}@media print{.neon{background:none;&,&::before,&::after{-webkit-print-color-adjust:exact;print-color-adjust:exact}}}@media (prefers-reduced-motion){.neon,.neon::before,.neon::after{transition:none !important;animation:none !important}}
</style>
</head>
<body>
<input type="checkbox" role="switch" class="neon" />
</body>
</html>
