Webleb - Snippet di Codice - Un codice di Mete

HTML

<!DOCTYPE html>

<head>

<title>Small Bear Login Form</title>

<style>

* {

padding: 0;

margin: 0;

box-sizing: border-box;

font-family: sans-serif;

}

body {

background-color: #d8c2ef; /* Pastel mor arka plan */

height: 100vh;

display: flex;

align-items: center;

justify-content: center;

}

.container {

background-color: #ffffff;

position: relative;

width: 18em; /* Küçültüldü: 22em -> 18em */

height: 24em; /* Küçültüldü: 30em -> 24em */

border-radius: 0.8em;

box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.3);

display: flex;

align-items: center;

justify-content: center;

}

form {

position: absolute;

z-index: 2;

width: 15em; /* Küçültüldü: 18em -> 15em */

margin-top: 7em; /* Küçültüldü: 10em -> 7em */

}

label {

font-size: 0.85em; /* Küçültüldü: 0.9em -> 0.85em */

color: #544c4c;

font-weight: 600;

}

input {

width: 100%;

font-size: 0.85em; /* Küçültüldü: 0.9em -> 0.85em */

padding: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

border: none;

border-bottom: 2px solid #b4ac95;

margin-bottom: 0.8em; /* Küçültüldü: 1em -> 0.8em */

outline: none;

}

button {

width: 100%;

font-size: 0.9em; /* Küçültüldü: 1em -> 0.9em */

background-color: #663d17;

color: #ffffff;

border: none;

padding: 0.7em 0; /* Küçültüldü: 0.8em -> 0.7em */

border-radius: 0.3em;

margin-top: 0.8em; /* Küçültüldü: 1em -> 0.8em */

cursor: pointer;

}

button:hover {

background-color: #8b5a2b;

}

/* Bear Ears */

.ear-l,

.ear-r {

background-color: #8b5a2b;

height: 4em; /* Küçültüldü: 5em -> 4em */

width: 4em; /* Küçültüldü: 5em -> 4em */

border-radius: 50%;

position: absolute;

top: -1.2em; /* Küçültüldü: -1.5em -> -1.2em */

}

.ear-l {

left: 1.8em; /* Küçültüldü: 2em -> 1.8em */

}

.ear-r {

right: 1.8em; /* Küçültüldü: 2em -> 1.8em */

}

.ear-l:before,

.ear-r:before {

position: absolute;

content: "";

height: 2.4em; /* Küçültüldü: 3em -> 2.4em */

width: 2.4em; /* Küçültüldü: 3em -> 2.4em */

background-color: #d8b596;

border-radius: 50%;

top: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.ear-l:before {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.ear-r:before {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

/* Bear Face */

.bear-face {

position: absolute;

background-color: #8b5a2b;

height: 9.5em; /* Küçültüldü: 12em -> 9.5em */

width: 11em; /* Küçültüldü: 14em -> 11em */

border-radius: 50%;

top: -1.2em; /* Küçültüldü: -1.5em -> -1.2em */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

/* Eyes */

.eye-l,

.eye-r {

background-color: #ffffff;

height: 2em; /* Küçültüldü: 2.5em -> 2em */

width: 1.8em; /* Küçültüldü: 2.3em -> 1.8em */

border-radius: 50%;

position: absolute;

top: 2em; /* Küçültüldü: 2.5em -> 2em */

}

.eye-l {

left: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.eye-r {

right: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.eyeball-l,

.eyeball-r {

background-color: #000000;

height: 0.8em; /* Küçültüldü: 1em -> 0.8em */

width: 0.8em; /* Küçültüldü: 1em -> 0.8em */

border-radius: 50%;

position: absolute;

top: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.eyeball-l {

left: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.eyeball-r {

right: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

/* Blush */

.blush-l,

.blush-r {

background-color: #e5a190;

height: 1em; /* Küçültüldü: 1.3em -> 1em */

width: 1em; /* Küçültüldü: 1.3em -> 1em */

border-radius: 50%;

position: absolute;

top: 4.5em; /* Küçültüldü: 6em -> 4.5em */

opacity: 0.7;

}

.blush-l {

left: 1.6em; /* Küçültüldü: 2em -> 1.6em */

}

.blush-r {

right: 1.6em; /* Küçültüldü: 2em -> 1.6em */

}

/* Snout */

.snout {

position: absolute;

background-color: #d8b596;

height: 4em; /* Küçültüldü: 5em -> 4em */

width: 5.5em; /* Küçültüldü: 7em -> 5.5em */

border-radius: 50%;

top: 4em; /* Küçültüldü: 5em -> 4em */

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

}

/* Nose */

.nose {

background-color: #000000;

height: 1em; /* Küçültüldü: 1.2em -> 1em */

width: 1.2em; /* Küçültüldü: 1.5em -> 1.2em */

border-radius: 50%;

position: relative;

top: 0.2em;

}

/* Mouth */

.mouth {

height: 0.6em; /* Küçültüldü: 0.8em -> 0.6em */

width: 1em; /* Küçültüldü: 1.3em -> 1em */

border-bottom: 0.25em solid #000000; /* Küçültüldü: 0.3em -> 0.25em */

border-radius: 50%;

position: relative;

top: 0.6em; /* Küçültüldü: 0.8em -> 0.6em */

}

/* Hands */

.hand-l,

.hand-r {

background-color: #8b5a2b;

height: 2.5em; /* Küçültüldü: 3em -> 2.5em */

width: 2.5em; /* Küçültüldü: 3em -> 2.5em */

border-radius: 50%;

position: absolute;

bottom: 3.5em; /* Küçültüldü: 4.5em -> 3.5em */

}

.hand-l {

left: -0.8em; /* Küçültüldü: -1em -> -0.8em */

transform: rotate(-35deg);

}

.hand-r {

right: -0.8em; /* Küçültüldü: -1em -> -0.8em */

transform: rotate(35deg);

}

/* Paws */

.paw-l,

.paw-r {

background-color: #8b5a2b;

height: 2.8em; /* Küçültüldü: 3.5em -> 2.8em */

width: 3.2em; /* Küçültüldü: 4em -> 3.2em */

border-radius: 50%;

position: absolute;

bottom: -0.8em; /* Küçültüldü: -1em -> -0.8em */

}

.paw-l {

left: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.paw-r {

right: 2.4em; /* Küçültüldü: 3em -> 2.4em */

}

.paw-l:before,

.paw-r:before {

position: absolute;

content: "";

height: 1.6em; /* Küçültüldü: 2em -> 1.6em */

width: 1.6em; /* Küçültüldü: 2em -> 1.6em */

background-color: #d8b596;

border-radius: 50%;

bottom: 0.4em; /* Küçültüldü: 0.5em -> 0.4em */

}

.paw-l:before {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.paw-r:before {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

/* Paw Fingers */

.paw-l:after,

.paw-r:after {

position: absolute;

content: "";

height: 0.25em; /* Küçültüldü: 0.3em -> 0.25em */

width: 1.6em; /* Küçültüldü: 2em -> 1.6em */

background-color: #000000;

border-radius: 0.1em;

bottom: 1em; /* Küçültüldü: 1.3em -> 1em */

}

.paw-l:after {

left: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

.paw-r:after {

right: 0.8em; /* Küçültüldü: 1em -> 0.8em */

}

</style>

</head>

<body>

<form>

<label for="username">Username:</label>

<label for="password">Password:</label>

<button>Login</button>

</form>

</div>

</div>

</div>

</div>

document.addEventListener("DOMContentLoaded", function() {

// Göz hareketlerini izleme

const container = document.querySelector(".container");

const eyeballL = document.querySelector(".eyeball-l");

const eyeballR = document.querySelector(".eyeball-r");

container.addEventListener("mousemove", (e) => {

const x = e.clientX;

const y = e.clientY;

const rect = container.getBoundingClientRect();

const centerX = rect.left + rect.width / 2;

const centerY = rect.top + rect.height / 2;

const angleX = (x - centerX) / 30;

const angleY = (y - centerY) / 30;

// Göz bebeklerinin hareketini sınırla

const maxMove = 0.4; // Küçültüldü: 0.5 -> 0.4

const moveX = Math.max(-maxMove, Math.min(maxMove, angleX));

const moveY = Math.max(-maxMove, Math.min(maxMove, angleY));

eyeballL.style.transform = `translate(${moveX}em, ${moveY}em)`;

eyeballR.style.transform = `translate(${moveX}em, ${moveY}em)`;

});

// Giriş butonu animasyonu

const loginButton = document.querySelector("button");

loginButton.addEventListener("mousedown", () => {

const handL = document.querySelector(".hand-l");

const handR = document.querySelector(".hand-r");

handL.style.transition = "all 0.3s ease";

handR.style.transition = "all 0.3s ease";

handL.style.transform = "rotate(-15deg) translateY(-0.8em)"; // Küçültüldü: -1em -> -0.8em

handR.style.transform = "rotate(15deg) translateY(-0.8em)"; // Küçültüldü: -1em -> -0.8em

setTimeout(() => {

handL.style.transform = "rotate(-35deg)";

handR.style.transform = "rotate(35deg)";

handL.style.transition = "all 0.5s ease";

handR.style.transition = "all 0.5s ease";

}, 300);

});

// Form gönderme olayını engelle (örnek amaçlı)

const form = document.querySelector("form");

form.addEventListener("submit", (e) => {

e.preventDefault();

const username = document.getElementById("username").value;

const password = document.getElementById("password").value;

if (username && password) {

alert("Giriş başarılı! (Bu sadece bir demo)");

} else {

alert("Lütfen kullanıcı adı ve şifre girin!");

}

});

</script>

</body>

</html>

Un codice di Mete

Consigliato

Un ciclo quadratico con CSS

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

HTML

CSS

JS

Consigliato

Un ciclo quadratico con CSS

Modulo di registrazione per l'accesso con rotazione 3D HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS