Enchufes de encendido y apagado

Abrir en el editor Publica tu código

Recomendado

1 July 2025

Deslizadores de tres figuras 3D

9 September 2024

<!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>
<button class="plugs" type="button">
	<svg class="plugs__img" viewBox="0 0 70 35" width="700px" height="350px" aria-hidden="true">
		<g fill="none" stroke="currentcolor" stroke-linecap="round" stroke-width="1">
			<g class="plugs__img-left" transform="translate(13,10)">
				<polyline points="0 0,0 1" />
				<g class="plugs__img-left-seg" transform="translate(0,1)">
					<polyline points="0 0,0 1" />
					<g class="plugs__img-left-seg" transform="translate(0,1)">
						<polyline points="0 0,0 1" />
						<g class="plugs__img-left-seg" transform="translate(0,1)">
							<polyline points="0 0,0 1" />
							<g class="plugs__img-left-seg" transform="translate(0,1)">
								<polyline points="0 0,0 1" />
								<g class="plugs__img-left-seg" transform="translate(0,1)">
									<polyline points="0 0,0 1" />
									<g class="plugs__img-left-seg" transform="translate(0,1)">
										<polyline points="0 0,0 1" />
										<g class="plugs__img-left-seg" transform="translate(0,1)">
											<polyline points="0 0,0 1" />
											<g class="plugs__img-left-seg" transform="translate(0,1)">
												<polyline points="0 0,0 1" />
												<g class="plugs__img-left-seg" transform="translate(0,1)">
													<polyline points="0 0,0 1" />
													<g class="plugs__img-left-seg" transform="translate(0,1)">
														<polyline points="0 0,0 1" />
														<g class="plugs__img-left-seg plugs__img-left-seg--flip" transform="translate(0,1)">
															<polyline points="0 0,0 1" />
															<g class="plugs__img-left-seg plugs__img-left-seg--flip" transform="translate(0,1)">
																<polyline points="0 0,0 1" />
																<g class="plugs__img-left-seg plugs__img-left-seg--flip" transform="translate(0,1)">
																	<polyline points="0 0,0 1" />
																	<g class="plugs__img-left-seg plugs__img-left-seg--flip" transform="translate(0,1)">
																		<polyline points="0 0,0 1" />
																		<g class="plugs__img-left-seg plugs__img-left-seg--flip" transform="translate(0,1)">
																			<polyline points="0 0,0 1" />
																			<g class="plugs__img-left-head" transform="translate(-2.5,1)">
																				<rect rx="1" ry="1" x="0" y="0" width="5" height="6" />
																				<polyline class="plugs__img-prong" points="1 6,1 8" stroke-dasharray="2 2" />
																				<polyline class="plugs__img-prong" points="4 6,4 8" stroke-dasharray="2 2" />
																			</g>
																		</g>
																	</g>
																</g>
															</g>
														</g>
													</g>
												</g>
											</g>
										</g>
									</g>
								</g>
							</g>
						</g>
					</g>
				</g>
			</g>
			<g class="plugs__img-right" transform="translate(57,10)">
				<polyline points="0 0,0 1" />
				<g class="plugs__img-right-seg" transform="translate(0,1)">
					<polyline points="0 0,0 1" />
					<g class="plugs__img-right-seg" transform="translate(0,1)">
						<polyline points="0 0,0 1" />
						<g class="plugs__img-right-seg" transform="translate(0,1)">
							<polyline points="0 0,0 1" />
							<g class="plugs__img-right-seg" transform="translate(0,1)">
								<polyline points="0 0,0 1" />
								<g class="plugs__img-right-seg" transform="translate(0,1)">
									<polyline points="0 0,0 1" />
									<g class="plugs__img-right-seg" transform="translate(0,1)">
										<polyline points="0 0,0 1" />
										<g class="plugs__img-right-seg"transform="translate(0,1)">
											<polyline points="0 0,0 1" />
											<g class="plugs__img-right-seg" transform="translate(0,1)">
												<polyline points="0 0,0 1" />
												<g class="plugs__img-right-seg" transform="translate(0,1)">
													<polyline points="0 0,0 1" />
													<g class="plugs__img-right-seg" transform="translate(0,1)">
														<polyline points="0 0,0 1" />
														<g class="plugs__img-right-seg plugs__img-right-seg--flip" transform="translate(0,1)">
															<polyline points="0 0,0 1" />
															<g class="plugs__img-right-seg plugs__img-right-seg--flip" transform="translate(0,1)">
																<polyline points="0 0,0 1" />
																<g class="plugs__img-right-seg plugs__img-right-seg--flip" transform="translate(0,1)">
																	<polyline points="0 0,0 1" />
																	<g class="plugs__img-right-seg plugs__img-right-seg--flip" transform="translate(0,1)">
																		<polyline points="0 0,0 1" />
																		<g class="plugs__img-right-seg plugs__img-right-seg--flip" transform="translate(0,1)">
																			<polyline points="0 0,0 1" />
																			<g class="plugs__img-right-head" transform="translate(-2.5,1)">
																				<rect rx="1" ry="1" x="0" y="0" width="5" height="6" />
																			</g>
																		</g>
																	</g>
																</g>
															</g>
														</g>
													</g>
												</g>
											</g>
										</g>
									</g>
								</g>
							</g>
						</g>
					</g>
				</g>
			</g>
		</g>
		<g fill="currentcolor" transform="translate(35,10)">
			<g class="plugs__img-spark-1-y">
				<circle class="plugs__img-spark-1-x" r="0" cy="-1" />
			</g>
			<g class="plugs__img-spark-2-y">
				<circle class="plugs__img-spark-2-x" r="0" cy="0" />
			</g>
			<g class="plugs__img-spark-3-y">
				<circle class="plugs__img-spark-3-x" r="0" cy="1" />
			</g>
		</g>
	</svg>
	<span class="plugs__label">Power</span>
</button>
  <script  src="./script.js"></script>

</body>
</html>

CSS

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,10%);
  --fg: hsl(var(--hue),10%,90%);
  --primary: hsl(var(--hue),90%,50%);
  --primary2: hsl(var(--hue),90%,70%);
  --primary2-t: hsla(var(--hue),90%,70%,0);
  --border: hsl(var(--hue),10%,30%);
  --border-hover: hsl(var(--hue),10%,50%);
  --trans-dur: 0.3s;
  --trans-timing: cubic-bezier(0.65,0,0.35,1);
  font-size: calc(14px + (70 - 14) * (100vw - 280px) / (3840 - 280));
}

body,
button {
  color: var(--fg);
  font: 1em/1.5 sans-serif;
  transition: background-color calc(var(--trans-dur) * 0.5) steps(1, end), box-shadow var(--trans-dur) var(--trans-timing), color calc(var(--trans-dur) * 0.5) steps(1, end);
}

body {
  background-color: var(--bg);
  display: flex;
  height: 100vh;
}

.plugs {
  background-color: transparent;
  border-radius: 0.375em;
  box-shadow: 0 0 0 0.0625em var(--border), 0 0 0 0.25em var(--primary2-t);
  cursor: pointer;
  display: block;
  margin: auto;
  outline: transparent;
  position: relative;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
.plugs:hover {
  box-shadow: 0 0 0 0.0625em var(--border-hover), 0 0 0 0.25em var(--primary2-t);
}
.plugs:focus-visible {
  box-shadow: 0 0 0 0.0625em var(--primary), 0 0 0 0.25em var(--primary2);
}
.plugs__img {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  width: 16em;
  height: auto;
}
.plugs__img-left, .plugs__img-left-seg, .plugs__img-left-head, .plugs__img-right, .plugs__img-right-seg, .plugs__img-right-head, .plugs__img-prong, .plugs__img-spark-1-x, .plugs__img-spark-1-y, .plugs__img-spark-2-x, .plugs__img-spark-2-y, .plugs__img-spark-3-x, .plugs__img-spark-3-y {
  animation-duration: calc(var(--trans-dur) * 3);
  animation-timing-function: var(--trans-timing);
}
.plugs__img-left-head, .plugs__img-right-head {
  transform-origin: 2px 0;
}
.plugs__img-left {
  transform: translate(13px, 10px) rotate(0);
}
.plugs__img-right {
  transform: translate(57px, 10px) rotate(0);
}
.plugs__img-prong {
  stroke-dashoffset: 0;
}
.plugs__img-spark-1-x, .plugs__img-spark-2-x, .plugs__img-spark-3-x {
  animation-timing-function: linear;
}
.plugs__img-spark-1-y, .plugs__img-spark-2-y, .plugs__img-spark-3-y {
  animation-timing-function: cubic-bezier(0.35, 1, 0.65, 1);
}
.plugs[aria-pressed=false] .plugs__img-left {
  animation-name: left-swing-tail-off;
}
.plugs[aria-pressed=false] .plugs__img-left-seg {
  animation-name: left-swing-seg-off;
}
.plugs[aria-pressed=false] .plugs__img-left-seg--flip {
  animation-name: left-swing-seg-off-2;
}
.plugs[aria-pressed=false] .plugs__img-left-head {
  animation-name: left-swing-head-off;
}
.plugs[aria-pressed=false] .plugs__img-right {
  animation-name: right-swing-tail-off;
}
.plugs[aria-pressed=false] .plugs__img-right-seg {
  animation-name: right-swing-seg-off;
}
.plugs[aria-pressed=false] .plugs__img-right-seg--flip {
  animation-name: right-swing-seg-off-2;
}
.plugs[aria-pressed=false] .plugs__img-right-head {
  animation-name: right-swing-head-off;
}
.plugs[aria-pressed=false] .plugs__img-prong {
  animation-name: prongs-off;
  animation-timing-function: cubic-bezier(0.35, 0, 0.65, 0);
}
.plugs[aria-pressed=false] .plugs__img-spark-1-x {
  animation-name: spark-1-x;
}
.plugs[aria-pressed=false] .plugs__img-spark-1-y {
  animation-name: spark-1-y;
}
.plugs[aria-pressed=false] .plugs__img-spark-2-x {
  animation-name: spark-2-x;
}
.plugs[aria-pressed=false] .plugs__img-spark-2-y {
  animation-name: spark-2-y;
}
.plugs[aria-pressed=false] .plugs__img-spark-3-x {
  animation-name: spark-3-x;
}
.plugs[aria-pressed=false] .plugs__img-spark-3-y {
  animation-name: spark-3-y;
}
.plugs[aria-pressed=true] .plugs__img-left {
  animation-name: left-swing-tail-on;
  transform: translate(13px, 10px) rotate(-90deg);
}
.plugs[aria-pressed=true] .plugs__img-left-seg {
  animation-name: left-swing-seg-on;
}
.plugs[aria-pressed=true] .plugs__img-left-seg--flip {
  animation-name: right-swing-seg-on;
}
.plugs[aria-pressed=true] .plugs__img-left-head {
  animation-name: left-swing-head-on;
}
.plugs[aria-pressed=true] .plugs__img-right {
  animation-name: right-swing-tail-on;
  transform: translate(57px, 10px) rotate(90deg);
}
.plugs[aria-pressed=true] .plugs__img-right-seg {
  animation-name: right-swing-seg-on;
}
.plugs[aria-pressed=true] .plugs__img-right-seg--flip {
  animation-name: left-swing-seg-on;
}
.plugs[aria-pressed=true] .plugs__img-right-head {
  animation-name: right-swing-head-on;
}
.plugs[aria-pressed=true] .plugs__img-prong {
  animation-name: prongs-on;
  animation-timing-function: cubic-bezier(0.35, 1, 0.65, 1);
  stroke-dashoffset: 2;
}
.plugs__label {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
}

/* Dark theme */
[data-dark=false] {
  --bg: hsl(var(--hue),10%,90%);
  --fg: hsl(var(--hue),10%,10%);
  --border: hsl(var(--hue),10%,70%);
}
[data-dark=false] body,
[data-dark=false] button {
  transition-duration: calc(var(--trans-dur) * 2.25), var(--trans-dur), calc(var(--trans-dur) * 2.25);
}

/* Animations */
@keyframes prongs-off {
  from {
    stroke-dashoffset: 2;
  }
  17.5%, to {
    stroke-dashoffset: 0;
  }
}
@keyframes left-swing-tail-off {
  from {
    transform: translate(13px, 10px) rotate(-90deg);
  }
  25% {
    transform: translate(13px, 10px) rotate(-32deg);
  }
  50% {
    transform: translate(13px, 10px) rotate(2deg);
  }
  75% {
    transform: translate(13px, 10px) rotate(-1deg);
  }
  to {
    transform: translate(13px, 10px) rotate(0);
  }
}
@keyframes left-swing-seg-off {
  from {
    transform: translate(0, 1px) rotate(0);
  }
  25% {
    transform: translate(0, 1px) rotate(-10deg);
  }
  50% {
    transform: translate(0, 1px) rotate(2deg);
  }
  75% {
    transform: translate(0, 1px) rotate(-1deg);
  }
  to {
    transform: translate(0, 1px) rotate(0);
  }
}
@keyframes left-swing-seg-off-2 {
  from {
    transform: translate(0, 1px) rotate(0);
  }
  25% {
    transform: translate(0, 1px) rotate(10deg);
  }
  50% {
    transform: translate(0, 1px) rotate(2deg);
  }
  75% {
    transform: translate(0, 1px) rotate(-1deg);
  }
  to {
    transform: translate(0, 1px) rotate(0);
  }
}
@keyframes left-swing-head-off {
  from {
    transform: translate(-2.5px, 1px) rotate(0);
  }
  25% {
    transform: translate(-2.5px, 1px) rotate(-10deg);
  }
  50% {
    transform: translate(-2.5px, 1px) rotate(2deg);
  }
  75% {
    transform: translate(-2.5px, 1px) rotate(-1deg);
  }
  to {
    transform: translate(-2.5px, 1px) rotate(0);
  }
}
@keyframes right-swing-tail-off {
  from {
    transform: translate(57px, 10px) rotate(90deg);
  }
  25% {
    transform: translate(57px, 10px) rotate(32deg);
  }
  50% {
    transform: translate(57px, 10px) rotate(-2deg);
  }
  75% {
    transform: translate(57px, 10px) rotate(1deg);
  }
  to {
    transform: translate(57px, 10px) rotate(0);
  }
}
@keyframes right-swing-seg-off {
  from {
    transform: translate(0, 1px) rotate(0);
  }
  25% {
    transform: translate(0, 1px) rotate(10deg);
  }
  50% {
    transform: translate(0, 1px) rotate(-2deg);
  }
  75% {
    transform: translate(0, 1px) rotate(1deg);
  }
  to {
    transform: translate(0, 1px) rotate(0);
  }
}
@keyframes right-swing-seg-off-2 {
  from {
    transform: translate(0, 1px) rotate(0);
  }
  25% {
    transform: translate(0, 1px) rotate(-10deg);
  }
  50% {
    transform: translate(0, 1px) rotate(-2deg);
  }
  75% {
    transform: translate(0, 1px) rotate(1deg);
  }
  to {
    transform: translate(0, 1px) rotate(0);
  }
}
@keyframes right-swing-head-off {
  from {
    transform: translate(-2.5px, 1px) rotate(0);
  }
  25% {
    transform: translate(-2.5px, 1px) rotate(10deg);
  }
  50% {
    transform: translate(-2.5px, 1px) rotate(-2deg);
  }
  75% {
    transform: translate(-2.5px, 1px) rotate(1deg);
  }
  to {
    transform: translate(-2.5px, 1px) rotate(0);
  }
}
@keyframes prongs-on {
  from, 70% {
    stroke-dashoffset: 0;
  }
  90%, to {
    stroke-dashoffset: 2;
  }
}
@keyframes left-swing-tail-on {
  from {
    transform: translate(13px, 10px) rotate(0);
  }
  50% {
    transform: translate(13px, 10px) rotate(-32deg);
  }
  to {
    transform: translate(13px, 10px) rotate(-90deg);
  }
}
@keyframes left-swing-seg-on {
  from {
    transform: translate(0, 1px) rotate(0);
  }
  50% {
    transform: translate(0, 1px) rotate(-10deg);
  }
  to {
    transform: translate(0, 1px) rotate(0);
  }
}
@keyframes left-swing-head-on {
  from {
    transform: translate(-2.5px, 1px) rotate(0);
  }
  50% {
    transform: translate(-2.5px, 1px) rotate(-10deg);
  }
  to {
    transform: translate(-2.5px, 1px) rotate(0);
  }
}
@keyframes right-swing-tail-on {
  from {
    transform: translate(57px, 10px) rotate(0);
  }
  50% {
    transform: translate(57px, 10px) rotate(32deg);
  }
  to {
    transform: translate(57px, 10px) rotate(90deg);
  }
}
@keyframes right-swing-seg-on {
  from {
    transform: translate(0, 1px) rotate(0);
  }
  50% {
    transform: translate(0, 1px) rotate(10deg);
  }
  to {
    transform: translate(0, 1px) rotate(0);
  }
}
@keyframes right-swing-head-on {
  from {
    transform: translate(-2.5px, 1px) rotate(0);
  }
  50% {
    transform: translate(-2.5px, 1px) rotate(10deg);
  }
  to {
    transform: translate(-2.5px, 1px) rotate(0);
  }
}
@keyframes spark-1-x {
  from, 12.5% {
    r: 1px;
    transform: translate(0, 0);
  }
  37.5%, to {
    r: 0;
    transform: translate(-10px, 0);
  }
}
@keyframes spark-1-y {
  from {
    animation-timing-function: steps(1, end);
    transform: translate(0, 0);
    visibility: hidden;
  }
  12.5% {
    animation-timing-function: linear;
    transform: translate(0, 0);
    visibility: visible;
  }
  37.5%, to {
    transform: translate(0, -9px);
  }
}
@keyframes spark-2-x {
  from, 12.5% {
    r: 1px;
    transform: translate(0, 0);
  }
  37.5%, to {
    r: 0;
    transform: translate(4px, 0);
  }
}
@keyframes spark-2-y {
  from {
    animation-timing-function: steps(1, end);
    transform: translate(0, 0);
    visibility: hidden;
  }
  12.5% {
    animation-timing-function: linear;
    transform: translate(0, 0);
    visibility: visible;
  }
  37.5%, to {
    transform: translate(0, -8px);
  }
}
@keyframes spark-3-x {
  from, 12.5% {
    r: 1px;
    transform: translate(0, 0);
  }
  37.5%, to {
    r: 0;
    transform: translate(-1px, 0);
  }
}
@keyframes spark-3-y {
  from {
    animation-timing-function: steps(1, end);
    transform: translate(0, 0);
    visibility: hidden;
  }
  12.5% {
    animation-timing-function: linear;
    transform: translate(0, 0);
    visibility: visible;
  }
  37.5%, to {
    transform: translate(0, 8px);
  }
}

Enchufes de encendido y apagado

Recomendado

Muy lejos bien chido

Deslizadores de tres figuras 3D

Tres en raya

HTML

CSS

JS

Recomendado

Muy lejos bien chido

Deslizadores de tres figuras 3D

Tres en raya

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS