分享一个霓虹灯拨动开关

先看效果：
在这里插入图片描述
再看代码（查看更多）：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> 霓虹灯拨动开关</title><style>* {border: 0;box-sizing: border-box;margin: 0;padding: 0;}:root {--hue: 223;--off-hue: 3;--on-hue1: 123;--on-hue2: 168;--fg: hsl(var(--hue),10%,90%);--primary: hsl(var(--hue),90%,50%);--trans-dur: 0.6s;--trans-timing: cubic-bezier(0.65,0,0.35,1);font-size: calc(40px + (60 - 40) * (100vw - 320px) / (2560 - 320));}body,input {font: 1em/1.5 sans-serif;}body {background-image: linear-gradient(45deg,hsl(var(--hue),10%,20%), hsl(var(--hue),10%,10%));color: var(--fg);display: flex;height: 100vh;transition:background-color var(--trans-dur),color var(--trans-dur);}.switch,.switch__input {-webkit-tap-highlight-color: #0000;}.switch {display: block;margin: auto;position: relative;width: 5em;height: 3em;}.switch__base-outer,.switch__base-inner {display: block;position: absolute;}.switch__base-outer {border-radius: 1.25em;box-shadow:-0.125em -0.125em 0.25em hsl(var(--hue),10%,30%),0.125em 0.125em 0.125em hsl(var(--hue),10%,30%) inset,0.125em 0.125em 0.25em hsl(0,0%,0%),-0.125em -0.125em 0.125em hsl(var(--hue),10%,5%) inset;top: 0.125em;left: 0.125em;width: 4.75em;height: 2.75em;}.switch__base-inner {border-radius: 1.125em;box-shadow:-0.25em -0.25em 0.25em hsl(var(--hue),10%,30%) inset,0.0625em 0.0625em 0.125em hsla(var(--hue),10%,30%),0.125em 0.25em 0.25em hsl(var(--hue),10%,5%) inset,-0.0625em -0.0625em 0.125em hsla(var(--hue),10%,5%);top: 0.375em;left: 0.375em;width: 4.25em;height: 2.25em;}.switch__base-neon {display: block;overflow: visible;position: absolute;top: 0;left: 0;width: 100%;height: auto;}.switch__base-neon path {stroke-dasharray: 0 104.26 0;transition: stroke-dasharray var(--trans-dur) var(--trans-timing);}.switch__input {outline: transparent;position: relative;width: 100%;height: 100%;-webkit-appearance: none;appearance: none;}.switch__input:before {border-radius: 0.125em;box-shadow: 0 0 0 0.125em hsla(var(--hue),90%,50%,0);content: "";display: block;position: absolute;inset: -0.125em;transition: box-shadow 0.15s linear;}.switch__input:focus-visible:before {box-shadow: 0 0 0 0.125em var(--primary);}.switch__knob,.switch__knob-container {border-radius: 1em;display: block;position: absolute;}.switch__knob {background-color: hsl(var(--hue),10%,15%);background-image:radial-gradient(88% 88% at 50% 50%,hsl(var(--hue),10%,20%) 47%,hsla(var(--hue),10%,20%,0) 50%),radial-gradient(88% 88% at 47% 47%,hsl(var(--hue),10%,85%) 45%,hsla(var(--hue),10%,85%,0) 50%),radial-gradient(65% 70% at 40% 60%,hsl(var(--hue),10%,20%) 46%,hsla(var(--hue),10%,20%,0) 50%);box-shadow:-0.0625em -0.0625em 0.0625em hsl(var(--hue),10%,15%) inset,-0.125em -0.125em 0.0625em hsl(var(--hue),10%,5%) inset,0.75em 0.25em 0.125em hsla(0,0%,0%,0.8);width: 2em;height: 2em;transition: transform var(--trans-dur) var(--trans-timing);}.switch__knob-container {overflow: hidden;top: 0.5em;left: 0.5em;width: 4em;height: 2em;}.switch__knob-neon {display: block;width: 2em;height: auto;}.switch__knob-neon circle {opacity: 0;stroke-dasharray: 0 90.32 0 54.19;transition:opacity var(--trans-dur) steps(1,end),stroke-dasharray var(--trans-dur) var(--trans-timing);}.switch__knob-shadow {border-radius: 50%;box-shadow: 0.125em 0.125em 0.125em hsla(0,0%,0%,0.9);display: block;position: absolute;top: 0.5em;left: 0.5em;width: 2em;height: 2em;transition: transform var(--trans-dur) var(--trans-timing);}.switch__led {background-color: hsl(var(--off-hue),90%,70%);border-radius: 50%;box-shadow:0 -0.0625em 0.0625em hsl(var(--off-hue),90%,40%) inset,0 0 0.125em hsla(var(--off-hue),90%,70%,0.3),0 0 0.125em hsla(var(--off-hue),90%,70%,0.3),0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);display: block;position: absolute;top: 0;left: 0;width: 0.25em;height: 0.25em;transition:background-color var(--trans-dur) var(--trans-timing),box-shadow var(--trans-dur) var(--trans-timing);}.switch__text {overflow: hidden;position: absolute;width: 1px;height: 1px;}.switch__input:checked ~ .switch__led {background-color: hsl(var(--on-hue1),90%,70%);box-shadow:0 -0.0625em 0.0625em hsl(var(--on-hue1),90%,40%) inset,0 -0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3),0 0.125em 0.125em hsla(var(--on-hue1),90%,70%,0.3),0.125em 0.125em 0.125em hsla(0,0%,0%,0.5);}.switch__input:checked ~ .switch__base-neon path {stroke-dasharray: 52.13 0 52.13;}.switch__input:checked ~ .switch__knob-shadow,.switch__input:checked ~ .switch__knob-container .switch__knob {transform: translateX(100%);}.switch__input:checked ~ .switch__knob-container .switch__knob-neon circle {opacity: 1;stroke-dasharray: 45.16 0 45.16 54.19;transition-timing-function: steps(1,start), var(--trans-timing);}</style>
</head>
<body>
<label class="switch"><input class="switch__input" type="checkbox" role="switch"><span class="switch__base-outer"></span><span class="switch__base-inner"></span><svg class="switch__base-neon" viewBox="0 0 40 24" width="40px" height="24px"><defs><filter id="switch-glow"><feGaussianBlur result="coloredBlur" stddeviation="1"></feGaussianBlur><feMerge><feMergeNode in="coloredBlur"></feMergeNode><feMergeNode in="SourceGraphic"></feMergeNode></feMerge></filter><linearGradient id="switch-gradient1" x1="0" y1="0" x2="1" y2="0"><stop offset="0%" stop-color="hsl(var(--on-hue1),90%,70%)" /><stop offset="100%" stop-color="hsl(var(--on-hue2),90%,70%)" /></linearGradient><linearGradient id="switch-gradient2" x1="0.7" y1="0" x2="0.3" y2="1"><stop offset="25%" stop-color="hsla(var(--on-hue1),90%,70%,0)" /><stop offset="50%" stop-color="hsla(var(--on-hue1),90%,70%,0.3)" /><stop offset="100%" stop-color="hsla(var(--on-hue2),90%,70%,0.3)" /></linearGradient></defs><path fill="none" filter="url(#switch-glow)" stroke="url(#switch-gradient1)" stroke-width="1" stroke-dasharray="0 104.26 0" stroke-dashoffset="0.01" stroke-linecap="round" d="m.5,12C.5,5.649,5.649.5,12,.5h16c6.351,0,11.5,5.149,11.5,11.5s-5.149,11.5-11.5,11.5H12C5.649,23.5.5,18.351.5,12Z"/></svg><span class="switch__knob-shadow"></span><span class="switch__knob-container"><span class="switch__knob"><svg class="switch__knob-neon" viewBox="0 0 48 48" width="48px" height="48px"><circle fill="none" stroke="url(#switch-gradient2)" stroke-dasharray="0 90.32 0 54.19" stroke-linecap="round" stroke-width="1" r="23" cx="24" cy="24" transform="rotate(-112.5,24,24)" /></svg></span></span><span class="switch__led"></span><span class="switch__text">Power</span>
</label>
</body>
</html>