Interruptor de palanca de neón

Abrir en el editor Video Publica tu código

Recomendado

6 October 2025

Fragmento de código de animación de laberinto CSS

27 May 2025

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"><link rel="stylesheet" href="./style.css">

</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>

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);
}

Interruptor de palanca de neón

Recomendado

Fragmento de código de animación de laberinto CSS

Tarjeta de pago

Calculadora de IMC

HTML

CSS

JS

Recomendado

Fragmento de código de animación de laberinto CSS

Tarjeta de pago

Calculadora de IMC

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS