WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1091
Andev.web
Abrir no Editor
Publique Seu Código
19 May 2025
JOGO PACK MAN
21 October 2024
Regras de senha + alternar componentes da Web
HTML
Copy
<!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"> <span class="switch__wrapper"> <input class="switch__input" type="checkbox" role="switch"> <span class="switch__emoji"> <span class="switch__emoji-face switch__emoji-face--sad"> <span class="switch__emoji-eye"></span> <span class="switch__emoji-eye"></span> <span class="switch__emoji-mouth"></span> </span> <span class="switch__emoji-face"> <span class="switch__emoji-eye"></span> <span class="switch__emoji-eye"></span> <span class="switch__emoji-mouth"></span> </span> </span> </span> <span class="switch__label">Power</span> </label> </body> </html>
CSS
Copy
* { border: 0; box-sizing: border-box; margin: 0; padding: 0; } :root { --hue: 223; --bg: hsl(var(--hue),10%,90%); --fg: hsl(var(--hue),10%,10%); --trans-dur: 0.5s; --trans-timing1: cubic-bezier(0.65,0,0.35,1); --trans-timing2: cubic-bezier(0.65,0,0.35,1.5); font-size: calc(56px + (120 - 56) * (100vw - 280px) / (3840 - 280)); } body, input { color: var(--fg); font: 1em/1.5 sans-serif; transition: background-color var(--trans-dur) var(--trans-timing1), color var(--trans-dur) var(--trans-timing1); } body { background-color: var(--bg); display: flex; height: 100vh; } .switch { display: flex; margin: auto; } .switch__emoji { box-shadow: 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3); overflow: hidden; pointer-events: none; top: 0.25em; left: 0.25em; width: 1em; height: 1em; } [dir=rtl] .switch__emoji { right: 0.25em; left: auto; } .switch__emoji, .switch__emoji:before, .switch__emoji:after, .switch__emoji-eye, .switch__emoji-mouth, .switch__emoji-face { display: block; position: absolute; } .switch__emoji, .switch__emoji:before, .switch__emoji:after, .switch__emoji-eye, .switch__emoji-mouth { border-radius: 50%; } .switch__emoji:before, .switch__emoji:after { content: ""; width: 100%; height: 100%; transform: translateZ(0); } .switch__emoji:before { background-color: #f2c40d; box-shadow: -0.25em -0.25em 0.25em #c29d0a inset, 0.1875em 0.1875em 0.25em #f9e286 inset; } .switch__emoji:after { box-shadow: 0 0 0.125em 0.0625em rgba(245, 208, 61, 0.5) inset; } .switch__emoji, .switch__emoji-face { transform-style: preserve-3d; transition: transform var(--trans-dur) var(--trans-timing2); } .switch__emoji-eye, .switch__emoji-mouth { backface-visibility: hidden; } .switch__emoji-eye { border: 0.0625em solid hsl(var(--hue), 10%, 10%); border-right-color: transparent; border-bottom-color: transparent; border-radius: 50%; top: 50%; left: 50%; width: 0.25em; height: 0.25em; transform: translate(-50%, -50%) rotateY(-22.5deg) translateZ(0.5em) rotateZ(45deg); } .switch__emoji-eye + .switch__emoji-eye { transform: translate(-50%, -50%) rotateY(22.5deg) translateZ(0.5em) rotateZ(45deg); } .switch__emoji-mouth { background-image: radial-gradient(100% 100% at 50% 100%, #f2180d 20%, #f5463d 33%, rgba(245, 70, 61, 0) 35%), radial-gradient(100% 100% at 75% 113%, black 26%, rgba(0, 0, 0, 0) 35%), linear-gradient(rgba(0, 0, 0, 0) 50%, black 50% 55%, hsl(var(--hue), 10%, 10%) 65%); top: 50%; left: 50%; width: 0.5em; height: 0.5em; transform: translate(-50%, -50%) rotateX(-15deg) translateZ(0.5em); } .switch__emoji-face { top: 0; left: 0; width: 100%; height: 100%; transform: rotateY(0); } .switch__emoji-face + .switch__emoji-face { transform: rotateY(-180deg); } .switch__emoji-face--sad .switch__emoji-eye { background-color: hsl(var(--hue), 10%, 10%); border: 0; width: 0.1875em; height: 0.1875em; } .switch__emoji-face--sad .switch__emoji-mouth { background-image: none; border: 0.0625em solid transparent; border-top-color: hsl(var(--hue), 10%, 10%); transform: translate(-50%, 0) rotateX(-20deg) translateZ(0.5em); } .switch__input, .switch__label { -webkit-tap-highlight-color: transparent; } .switch__input { background-color: hsl(var(--hue), 10%, 80%); border-radius: 0.75em; box-shadow: 0.0625em 0.0625em 0.0625em white inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 80%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 90%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3); cursor: pointer; display: block; width: 2.5em; height: 1.5em; -webkit-appearance: none; appearance: none; transition: background-color var(--trans-dur) var(--trans-timing1), box-shadow var(--trans-dur) var(--trans-timing1); } .switch__input:checked { background-color: #0ac213; } .switch__input:checked + .switch__emoji { transform: translateX(100%); } [dir=rtl] .switch__input:checked + .switch__emoji { transform: translateX(-100%); } .switch__input:checked + .switch__emoji .switch__emoji-face { transform: rotateY(179.99deg); } [dir=rtl] .switch__input:checked + .switch__emoji .switch__emoji-face { transform: rotateY(-179.99deg); } .switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face { transform: rotateY(0); } [dir=rtl] .switch__input:checked + .switch__emoji .switch__emoji-face + .switch__emoji-face { transform: rotateY(-360deg); } .switch__label, .switch__wrapper { display: block; } .switch__label { margin-inline-start: 0.5em; overflow: hidden; position: absolute; width: 1px; height: 1px; } .switch__wrapper { position: relative; } /* Dark theme */ @media (prefers-color-scheme: dark) { :root { --bg: hsl(var(--hue),10%,10%); --fg: hsl(var(--hue),10%,90%); } .switch__input { background-color: hsl(var(--hue), 10%, 20%); box-shadow: 0.0625em 0.0625em 0.0625em hsl(var(--hue), 10%, 25%) inset, -0.0625em -0.0625em 0.0625em hsl(var(--hue), 10%, 20%) inset, 0 0 0 0.125em hsl(var(--hue), 10%, 30%) inset, 0.25em 0.25em 0.125em rgba(0, 0, 0, 0.3) inset, 0.0625em 0.0625em 0.0625em rgba(0, 0, 0, 0.3); } }
JS
Copy
