Activación del ojo de esbirro

3,167 Andev.web

Remix Abrir en el editor Publica tu código

Recomendado

29 March 2026

Plantilla HTML para página de destino Tailwind CSS

12 December 2025

Plantilla HTML de cuenta regresiva para Navidad

3 March 2025

Botón de descarga

HTML

CSS

:root {
	/* Define size, transition properties, and color variables */
	--sz: 10vmin;
	--tr: all 0.5s ease 0s;
	--c-on-1: #fed501;
	--c-on-2: #e4bf00;
	--c-off-1: #224056;
	--c-off-2: #172c3c;
	--c-wht-1: #edecf5;
	--c-wht-2: #eaedef;
	--c-wht-3: #ccd2d5;
}

* {
	/* Set global box-sizing and transition */
	box-sizing: border-box;
	transition: var(--tr);
}

body {
	/* Full screen layout with background gradient */
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--c-wht-1), var(--c-wht-2), var(--c-wht-3));
}

.toggle {
	/* Toggle switch container */
	position: relative;
	width: calc(var(--sz) * 4);
	height: calc(var(--sz) * 2);
	display: flex;
	align-items: center;
	justify-content: center;
}

input {
	/* Hide checkbox input */
	display: none;
}

label[for=btn] {
	/* Style for the toggle background */
	position: absolute;
	width: calc(var(--sz) * 4);
	height: calc(var(--sz) * 2);
	background: var(--c-off-1);
	border-radius: var(--sz);
	box-shadow: 0 0 0 calc(var(--sz) / 7) var(--c-off-2);
}

#btn:checked + label {
	/* Change background and shadow when toggled ON */
	background: var(--c-on-1);  
	box-shadow: 0 0 0 calc(var(--sz) / 7) var(--c-on-2);
}

label[for=btn]:before,
label[for=btn]:after {
	/* Display ON/OFF text */
	content: "OFF";
	position: absolute;
	color: var(--c-off-2);
	left: calc(var(--sz)* -2);
	top: calc(var(--sz)* 0.55);
	font-family: Arial, Helvetica, sans-serif;
	font-size: calc(var(--sz)* 0.7);
	text-shadow: 0 calc(var(--sz) * -0.025) calc(var(--sz) * 0.025) #0008, 0 calc(var(--sz) * 0.025) calc(var(--sz) * 0.025) #fff9;
}

label[for=btn]:after {
	/* ON text styling */
	content: "ON";
	color: var(--c-wht-3);
	position: absolute;
	left: calc(var(--sz) * 4.65);
}

#btn:checked + label[for=btn]:before {
	/* Change OFF text color when checked */
	color: var(--c-wht-3);
	text-shadow: 0 calc(var(--sz) * -0.025) calc(var(--sz) * 0.025) #0008, 0 calc(var(--sz) * 0.025) calc(var(--sz) * 0.025) #fff9;
}

#btn:checked + label[for=btn]:after {
	/* Change ON text color and shadow when checked */
	color: var(--c-on-2);
	text-shadow: 0 0 calc(var(--sz) * 0.5) var(--c-on-1), 0 calc(var(--sz) * -0.025) calc(var(--sz) * 0.025) #0008, 0 calc(var(--sz) * 0.025) calc(var(--sz) * 0.025) #fff9;
}

.thumb {
	/* Circular thumb for toggle switch */
	position: absolute;
	width: calc(var(--sz)* 2);
	height: calc(var(--sz)* 2);
	top: calc(var(--sz)* 0);
	left: calc(var(--sz)* 0);
	background: #fff;
	border-radius: var(--sz);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1;
	overflow: hidden;
	box-shadow: 0 0 0 calc(var(--sz) / 7) var(--c-wht-1) inset;
	animation: go-back 1s ease 0s 1;
}

@keyframes go-back {
	/* Keyframe animation to move thumb left */
	0% { left: calc(100% - ((var(--sz) * 2))); }
	100% { left: calc(var(--sz)* 0); }
}

#btn:checked + label .thumb {
	/* Move thumb to the right when checked */
	transition: var(--tr);
	left: calc(100% - ((var(--sz) * 2)));
}

.thumb:before {
	content: "";
	position: absolute;
	width: calc(var(--sz) / 1.75);
	height: calc(var(--sz) / 1.75);
	background: radial-gradient(circle at 25% 50%, #fff 0 calc(var(--sz) * 0.05), #000 calc((var(--sz) * 0.05) + 1px) 100%);
	border-radius: 100%;
	left: calc(var(--sz) / 3);
	top: calc(var(--sz) / 1.25); 
	transition: var(--tr);
	animation: ojo 1s ease 0s;
}

@keyframes ojo {
	/* Eye animation for thumb */
	0% { 
		left: calc(var(--sz) / 3.5);
		top: calc(var(--sz) / 2.5);  
	}
	100% { 
		left: calc(var(--sz) / 3);
		top: calc(var(--sz) / 1.25);  
	}
}

#btn:checked + label .thumb:before {
	/* Move eye to a different position when checked */
	left: calc(var(--sz) / 3.5);
	top: calc(var(--sz) / 2.5); 
}

.thumb:after {
	/* Eyelid detail for thumb */
	content: "";
	position: absolute;
	width: calc(var(--sz) / 0.5);
	height: calc(var(--sz) / 0.5);
	background: linear-gradient(188deg, var(--c-wht-1) 0 calc(var(--sz) * 1.25), #fff0 calc((var(--sz) * 1.25) + 1px) 100%);
	background-size: 100% 200%;
	background-position: 50% 0%;
	transition: var(--tr);
	animation: parpado 1s ease 0s;
}

@keyframes parpado {
	/* Eyelid animation */
	0% { background-position: 50% 50%; }
	50% { background-position: 50% -5%; }
	75% { background-position: 50% 40%; }
	100% { background-position: 50% 0%; }
}

#btn:checked + label .thumb:after {
	/* Adjust eyelid position when checked */
	background-position: 50% 50%;
}