Webleb - Snippets de Código -

1177 Andev.web

Abrir no Editor Publique Seu Código

Recomendado

30 January 2025

Página de destino do Chef Pessoal

12 April 2025

Um Código por fadlanbryan22

21 October 2024

Entradas de um dígito com um elemento

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

Recomendado

Página de destino do Chef Pessoal

Um Código por fadlanbryan22

Entradas de um dígito com um elemento

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS