WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Ein Code von jrj332790
975
jrj332790
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
21 April 2025
Ein Code von Metehan
30 October 2025
CSS-Code für Ladeanimation mit Augensymbol (HTML)
30 March 2025
Ein Code von ytr3d3
HTML
Copy
Andev Web
Username:
Password:
Login
CSS
Copy
*{ padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background-color: #f4c531; } .container { height: 31.25em; width: 31.25em; position: absolute; transform: translate(-50%, -50%); top: 50%; left: 50%; } form { width: 23.75em; height: 18.75em; background-color: #ffffff; position: absolute; transform: translate(-50%, -50%); top: calc(50% + 3.1em); left: 50%; padding: 0 3.1em; display: flex; flex-direction: column; justify-content: center; border-radius: 0.5em; } form label { display: block; margin-bottom: 0.2em; font-weight: 600; color: #2e0d30; } form input { font-size: 0.95em; font-weight: 400; color: #3f3554; padding: 0.3em; border: none; border-bottom: 0.12em solid #3f3554; outline: none; } form input:focus { border-color: #f4c531; } form input:not(:last-child) { margin-bottom: 0.9em; } form button { font-size: 0.95em; padding: 0.8em 0; border-radius: 2em; border: none; cursor: pointer; outline: none; background-color: #f4c531; color: #2e0d30; text-transform: uppercase; font-weight: 600; letter-spacing: 0.15em; margin-top: 0.8em; transition: 0.5s ; } .panda-face { height: 7.5em; width: 8.4em; background-color: #ffffff; border: 0.18em solid #2e0d30; border-radius: 7.5em 7.5em 5.62em 5.62em; position: absolute; top: 2em; margin: auto; left: 0; right: 0; } .ear-l, .ear-r { background-color: #3f3554; height: 2.5em; width: 2.81em; border: 0.18em solid #2e0d30; border-radius: 2.5em 2.5em 0 0; top: 1.75em; position: absolute; } .ear-l { transform: rotate(-38deg); left: 10.75em; } .ear-r { transform: rotate(38deg); right: 10.75em; } .blush-l, .blush-r { background-color: #ff8bb1; height: 1em; width: 1.37em; border-radius: 50%; position: absolute; top: 4em; } .blush-l { transform: rotate(25deg); left: 1em; } .blush-r { transform: rotate(-25deg); right: 1em; } .eye-l, .eye-r { background-color: #3f3554; height: 2.18em; width: 2em; border-radius: 2em; position: absolute; top: 2.18em; } .eye-l { left: 1.37em; transform: rotate(-20deg); } .eye-r { right: 1.37em; transform: rotate(20deg); } .eyeball-l, .eyeball-r { height: 0.6em; width: 0.6em; background-color: #ffffff; border-radius: 50%; position: absolute; left: 0.6em; top: 0.6em; transition: 1s all; } .eyeball-l { transform: rotate(20deg); } .eyeball-r { transform: rotate(-20deg); } .nose { height: 1em; width: 1em; background-color: #3f3554; position: absolute; top: 4.37em; margin: auto; left: 0; right: 0; border-radius: 1.2em 0 0 0.25em; transform: rotate(45deg); } .nose:before { content: ""; position: absolute; background-color: #3f3554; height: 0.6em; width: 0.1em; transform: rotate(-45deg); top: 0.75em; left: 1em; } .mouth, .mouth:before { height: 0.75em; width: 0.93em; background-color: transparent; position: absolute; border-radius: 50%; box-shadow: 0 0.18em #3f3554; } .mouth { top: 5.31em; left: 3.12em; } .mouth:before { content: ""; position: absolute; left: 0.87em; } .hand-l, .hand-r { background-color: #3f3554; height: 2.81em; width: 2.5em; border: 0.18em solid #2e0d30; border-radius: 0.6em 0.6em 2.18em 2.18em; transition: 1s all; position: absolute; top: 8.4em; } .hand-l { left: 7.5em; } .hand-r { right: 7.5em; } .paw-l, .paw-r { background-color: #3f3554; height: 3.12em; width: 3.12em; border: 0.18em solid #2e0d30; border-radius: 2.5em 2.5em 1.2em 1.2em; position: absolute; top: 26.56em; } .paw-l { left: 10em; } .paw-r { right: 10em; } .paw-l:before, .paw-r:before { position: absolute; content: ""; background-color: #ffffff; height: 1.37em; width: 1.75em; top: 1.12em; left: 0.55em; border-radius: 1.56em 1.56em 0.6em 0.6em; } .paw-l:after, .paw-r:after { position: absolute; content: ""; background-color: #ffffff; height: 0.5em; width: 0.5em; border-radius: 50%; top: 0.31em; left: 1.12em; box-shadow: 0.87em 0.37em #ffffff, -0.87em 0.37em #ffffff; } @media screen and (max-width: 500px) { .container { font-size: 14px; } }
JS
Copy
let usernameRef = document.getElementById("username"); let passwordRef = document.getElementById("password"); let eyeL = document.querySelector(".eyeball-l"); let eyeR = document.querySelector(".eyeball-r"); let handL = document.querySelector(".hand-l"); let handR = document.querySelector(".hand-r"); let normalEyeStyle = () => { eyeL.style.cssText = ` left:0.6em; top: 0.6em; `; eyeR.style.cssText = ` right:0.6em; top:0.6em; `; }; let normalHandStyle = () => { handL.style.cssText = ` height: 2.81em; top:8.4em; left:7.5em; transform: rotate(0deg); `; handR.style.cssText = ` height: 2.81em; top: 8.4em; right: 7.5em; transform: rotate(0deg) `; }; //When clicked on username input usernameRef.addEventListener("focus", () => { eyeL.style.cssText = ` left: 0.75em; top: 1.12em; `; eyeR.style.cssText = ` right: 0.75em; top: 1.12em; `; normalHandStyle(); }); //When clicked on password input passwordRef.addEventListener("focus", () => { handL.style.cssText = ` height: 6.56em; top: 3.87em; left: 11.75em; transform: rotate(-155deg); `; handR.style.cssText = ` height: 6.56em; top: 3.87em; right: 11.75em; transform: rotate(155deg); `; normalEyeStyle(); }); //When clicked outside username and password input document.addEventListener("click", (e) => { let clickedElem = e.target; if (clickedElem != usernameRef && clickedElem != passwordRef) { normalEyeStyle(); normalHandStyle(); } });