这是一款CSS3和SVG超酷Neon样式开关按钮。该开关按钮结合SVG和CSS box-shadow，制作出Neon样式的发光开关按钮特效。
使用方法
HTML代码
<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>
CSS代码
* {
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);
}
codepen网址：https://codepen.io/jkantner/pen/MWzqMrpB
