Interruptor de palanca de neón

3,142 Andev.web

Abrir en el editor Publica tu código

Recomendado

15 May 2025

Un código de Mete

19 November 2025

Pantalla de carga animada con puntos en CSS

13 March 2026

Código HTML5 del juego de rompecabezas Block Blast

HTML

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