霓虹灯开关
分享一款来自公众号@XiaoSaurus的原创霓虹灯html代码，该代码为纯html，CSS写在了内部，不需要额外引入，霓虹灯开关效果很漂亮，应用在个人物联网项目中是一个比较不错的选择。
源码分享
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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;cursor:pointer}.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;cursor:pointer}.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>
原文链接：霓虹灯（可复制源代码）
[复制链接]
发表于 2024-9-2 02:02
|
发表于 2024-9-2 02:28
收藏备用