Webleb - HTML UI Elements - Um código de Metehan

HTML

<!DOCTYPE html>

<head>

<title>Etkileyici 3D Giriş</title>

</head>

<body>

</div>

</div>

</div>

<h1>Geleceğe Hoş Geldiniz</h1>

<label for="username">Kullanıcı Adı</label>

</div>

<label for="password">Şifre</label>

</div>

<span>Giriş Yap</span>

</button>

</form>

<a href="#" class="option" id="forgot-password">Şifremi Unuttum</a>

<a href="#" class="option" id="register-btn">Kayıt Ol</a>

</div>

<h2>Yeni Hesap Oluştur</h2>

<label for="new-username">Kullanıcı Adı</label>

</div>

<label for="email">E-posta</label>

</div>

<label for="new-password">Şifre</label>

</div>

<label for="confirm-password">Şifreyi Tekrarla</label>

</div>

<span>Hesap Oluştur</span>

</button>

</form>

<a href="#" id="back-to-login" class="option">Giriş Sayfasına Dön</a>

</div>

</body>

</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Rajdhani:wght@300;400;500;700&display=swap');

:root {

--primary-color: #00f7ff;

--secondary-color: #9c27b0;

--tertiary-color: #00ff9d;

--bg-dark: #050b24;

--text-light: #ffffff;

--highlight: rgba(0, 247, 255, 0.2);

}

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

body {

font-family: 'Rajdhani', sans-serif;

height: 100vh;

overflow: hidden;

color: var(--text-light);

background: var(--bg-dark);

perspective: 1000px;

}

#bg-canvas {

position: fixed;

top: 0;

left: 0;

width: 100%;

height: 100%;

z-index: 0;

}

.container {

position: relative;

z-index: 10;

width: 100%;

height: 100vh;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

gap: 2rem;

}

/* Logo Styles */

.logo-container {

display: flex;

gap: 3rem;

transform-style: preserve-3d;

animation: logoFloat 8s ease-in-out infinite;

}

.logo {

width: 100px;

height: 100px;

position: relative;

transform-style: preserve-3d;

transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);

}

.logo:hover {

transform: scale(1.2) rotate(15deg);

}

.bot {

width: 100%;

height: 100%;

position: absolute;

background-size: contain;

background-repeat: no-repeat;

background-position: center;

transform-style: preserve-3d;

transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);

filter: drop-shadow(0 0 10px currentColor);

}

.bot-1 {

color: var(--primary-color);

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300f7ff' d='M50 10C30 10 20 25 20 40v20c0 15 10 30 30 30s30-15 30-30V40c0-15-10-30-30-30zm-10 25a5 5 0 100 10 5 5 0 000-10zm20 0a5 5 0 100 10 5 5 0 000-10zm5 25H35s0 15 15 15 15-15 15-15z'/%3E%3C/svg%3E");

animation: pulse 3s ease-in-out infinite;

}

.bot-2 {

color: var(--secondary-color);

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%239c27b0' d='M50 10c-22 0-30 18-30 30v15c0 20 15 35 30 35s30-15 30-35V40c0-12-8-30-30-30zm-15 30a7 7 0 100 14 7 7 0 000-14zm30 0a7 7 0 100 14 7 7 0 000-14zM35 65h30s-5 20-15 20-15-20-15-20z'/%3E%3C/svg%3E");

animation: float 4s ease-in-out infinite;

}

.bot-3 {

color: var(--tertiary-color);

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='%2300ff9d' d='M30 20h40v60H30V20zm5 15a5 5 0 1010 0 5 5 0 00-10 0zm20 0a5 5 0 1010 0 5 5 0 00-10 0zM40 60h20v10H40V60z'/%3E%3C/svg%3E");

animation: rotate 5s linear infinite;

}

/* Login Container */

.login-container, .register-container {

background: rgba(7, 15, 45, 0.6);

backdrop-filter: blur(10px);

border-radius: 20px;

border: 1px solid rgba(255, 255, 255, 0.1);

box-shadow: 0 0 30px rgba(0, 247, 255, 0.1);

padding: 3rem;

width: 90%;

max-width: 500px;

transform-style: preserve-3d;

transform: perspective(1000px) rotateX(5deg);

transition: transform 0.5s ease, opacity 0.5s ease;

animation: containerFloat 6s ease-in-out infinite;

}

.login-container:hover {

transform: perspective(1000px) rotateX(0deg);

}

.login-container h1, .register-container h2 {

font-family: 'Orbitron', sans-serif;

text-align: center;

margin-bottom: 2rem;

font-weight: 700;

font-size: 2rem;

background: linear-gradient(135deg, var(--primary-color), var(--tertiary-color));

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

text-shadow: 0 0 10px rgba(0, 247, 255, 0.3);

}

.register-container h2 {

font-size: 1.8rem;

}

/* Form Styles */

.input-group {

position: relative;

margin-bottom: 2rem;

}

.input-group input {

width: 100%;

padding: 15px;

background: transparent;

border: none;

border-bottom: 2px solid rgba(255, 255, 255, 0.3);

color: var(--text-light);

font-size: 1.1rem;

font-family: 'Rajdhani', sans-serif;

letter-spacing: 1px;

transition: all 0.3s ease;

z-index: 1;

position: relative;

}

.input-group label {

position: absolute;

top: 15px;

left: 15px;

color: rgba(255, 255, 255, 0.6);

font-size: 1.1rem;

transition: all 0.3s ease;

pointer-events: none;

}

.input-group input:focus,

.input-group input:valid {

border-bottom-color: var(--primary-color);

outline: none;

}

.input-group input:focus + label,

.input-group input:valid + label {

top: -10px;

left: 0;

font-size: 0.85rem;

color: var(--primary-color);

font-weight: 500;

}

.input-highlight {

position: absolute;

bottom: 0;

left: 0;

width: 0;

height: 2px;

background: linear-gradient(90deg, var(--primary-color), var(--tertiary-color));

transition: width 0.3s ease;

}

.input-group input:focus ~ .input-highlight,

.input-group input:valid ~ .input-highlight {

width: 100%;

}

/* Button Styles */

.login-button {

font-family: 'Orbitron', sans-serif;

position: relative;

width: 100%;

padding: 15px;

margin-top: 1rem;

background: transparent;

border: 2px solid var(--primary-color);

border-radius: 30px;

color: var(--text-light);

font-size: 1.1rem;

font-weight: 500;

letter-spacing: 2px;

text-transform: uppercase;

cursor: pointer;

overflow: hidden;

transition: all 0.4s ease;

z-index: 1;

}

.login-button span {

position: relative;

z-index: 1;

transition: all 0.4s ease;

}

.button-effect {

position: absolute;

top: 50%;

left: 50%;

width: 10px;

height: 10px;

background: var(--primary-color);

border-radius: 50%;

transform: translate(-50%, -50%) scale(0);

transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

z-index: 0;

}

.login-button:hover {

box-shadow: 0 0 20px rgba(0, 247, 255, 0.5);

}

.login-button:hover .button-effect {

transform: translate(-50%, -50%) scale(20);

}

.login-button:hover span {

color: var(--bg-dark);

}

/* Options */

.options, .back-option {

display: flex;

justify-content: space-between;

margin-top: 1.5rem;

}

.back-option {

justify-content: center;

}

.option {

color: rgba(255, 255, 255, 0.7);

text-decoration: none;

font-size: 0.9rem;

transition: all 0.3s ease;

cursor: pointer;

}

.option:hover {

color: var(--primary-color);

text-shadow: 0 0 5px rgba(0, 247, 255, 0.5);

}

/* Kayıt formu için özel stillemeler */

.register-container {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

opacity: 0;

visibility: hidden;

transition: opacity 0.5s ease, visibility 0.5s;

z-index: 5;

}

.register-container.active {

opacity: 1;

visibility: visible;

}

.register-button {

background: linear-gradient(90deg, var(--tertiary-color), var(--secondary-color));

border: none;

}

.register-button span {

font-weight: 600;

}

/* Animations */

@keyframes pulse {

0%, 100% { transform: scale(1); opacity: 1; }

50% { transform: scale(1.1); opacity: 0.8; }

}

@keyframes float {

0%, 100% { transform: translateY(0) rotateY(0); }

50% { transform: translateY(-10px) rotateY(180deg); }

}

@keyframes rotate {

0% { transform: rotateZ(0); }

100% { transform: rotateZ(360deg); }

}

@keyframes logoFloat {

0%, 100% { transform: translateY(0) rotateX(10deg); }

50% { transform: translateY(-20px) rotateX(-10deg); }

}

@keyframes containerFloat {

0%, 100% { transform: perspective(1000px) rotateX(5deg) translateY(0); }

50% { transform: perspective(1000px) rotateX(5deg) translateY(-10px); }

}

/* Responsive Styles */

@media (max-width: 768px) {

.logo-container {

gap: 1.5rem;

}

.logo {

width: 70px;

height: 70px;

}

.login-container {

padding: 2rem;

}

.login-container h1 {

font-size: 1.6rem;

}

@media (max-width: 480px) {

.logo-container {

gap: 1rem;

}

.logo {

width: 50px;

height: 50px;

}

.login-container {

padding: 1.5rem;

}

.login-container h1 {

font-size: 1.4rem;

}

JS

// Arkaplan için Three.js kurulumu

let scene, camera, renderer;

let particles = [];

let clock = new THREE.Clock();

// DOM yüklendiğinde çalış

document.addEventListener('DOMContentLoaded', () => {

initThreeJS();

animate();

setupFormInteractions();

setupLogoInteractions();

setupRegistrationForm();

});

// Three.js başlatma

function initThreeJS() {

// Sahne oluştur

scene = new THREE.Scene();

// Kamera ayarla

camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

camera.position.z = 50;

// Renderer ayarla

renderer = new THREE.WebGLRenderer({

canvas: document.getElementById('bg-canvas'),

antialias: true,

alpha: true

});

renderer.setSize(window.innerWidth, window.innerHeight);

renderer.setPixelRatio(window.devicePixelRatio > 1 ? 2 : 1);

// Işık ekle

const ambientLight = new THREE.AmbientLight(0x404040);

scene.add(ambientLight);

const pointLight = new THREE.PointLight(0x00f7ff, 2, 300);

pointLight.position.set(0, 0, 25);

scene.add(pointLight);

// Parçacıklar ekle

addParticles();

// Ekran boyutu değiştiğinde güncelle

window.addEventListener('resize', onWindowResize);

}

// Parçacıklar ekle

function addParticles() {

// Parçacık materyali

const particleGeometry = new THREE.SphereGeometry(0.2, 8, 8);

const createParticle = (color) => {

const material = new THREE.MeshPhongMaterial({

color: color,

transparent: true,

opacity: Math.random() * 0.5 + 0.2,

emissive: color,

emissiveIntensity: 0.5

});

const mesh = new THREE.Mesh(particleGeometry, material);

// Rastgele konum

mesh.position.x = Math.random() * 100 - 50;

mesh.position.y = Math.random() * 100 - 50;

mesh.position.z = Math.random() * 50 - 25;

// Rastgele hareket

mesh.velocity = {

x: (Math.random() - 0.5) * 0.05,

y: (Math.random() - 0.5) * 0.05,

z: (Math.random() - 0.5) * 0.02

};

mesh.baseScale = Math.random() * 0.8 + 0.5;

mesh.scale.set(mesh.baseScale, mesh.baseScale, mesh.baseScale);

scene.add(mesh);

particles.push(mesh);

};

// Farklı renklerde parçacıklar

const colors = [0x00f7ff, 0x9c27b0, 0x00ff9d];

// 150 parçacık oluştur

for (let i = 0; i < 150; i++) {

const colorIndex = Math.floor(Math.random() * colors.length);

createParticle(colors[colorIndex]);

}

// Parçacıkları güncelle

function updateParticles() {

const delta = clock.getDelta();

particles.forEach(particle => {

// Hareket

particle.position.x += particle.velocity.x;

particle.position.y += particle.velocity.y;

particle.position.z += particle.velocity.z;

// Pulsing efekti

const pulseScale = particle.baseScale + Math.sin(Date.now() * 0.001 + Math.random() * 10) * 0.1;

particle.scale.set(pulseScale, pulseScale, pulseScale);

// Sınırlar dışına çıktığında geri döndür

if (Math.abs(particle.position.x) > 50) {

particle.velocity.x *= -1;

}

if (Math.abs(particle.position.y) > 50) {

particle.velocity.y *= -1;

}

if (Math.abs(particle.position.z) > 25) {

particle.velocity.z *= -1;

}

});

}

// Ekran boyutunu ayarla

function onWindowResize() {

camera.aspect = window.innerWidth / window.innerHeight;

camera.updateProjectionMatrix();

renderer.setSize(window.innerWidth, window.innerHeight);

}

// Animasyon döngüsü

function animate() {

requestAnimationFrame(animate);

// Kamera hafif hareket

camera.position.x = Math.sin(Date.now() * 0.0002) * 3;

camera.position.y = Math.cos(Date.now() * 0.0001) * 2;

camera.lookAt(scene.position);

// Parçacıkları güncelle

updateParticles();

// Render

renderer.render(scene, camera);

}

// Form etkileşimleri

function setupFormInteractions() {

const form = document.getElementById('login-form');

const inputs = document.querySelectorAll('input');

const loginButton = document.querySelector('.login-button');

// Input focus efektleri

inputs.forEach(input => {

input.addEventListener('focus', function() {

this.parentElement.style.transform = 'translateZ(20px)';

});

input.addEventListener('blur', function() {

this.parentElement.style.transform = 'translateZ(0)';

});

// Buton hover efekti

loginButton.addEventListener('mouseenter', function() {

const buttonEffect = this.querySelector('.button-effect');

buttonEffect.style.opacity = '1';

});

loginButton.addEventListener('mouseleave', function() {

const buttonEffect = this.querySelector('.button-effect');

buttonEffect.style.opacity = '0';

});

// Form gönderim efekti

form.addEventListener('submit', function(e) {

e.preventDefault();

// Giriş animasyonu

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

loginButton.innerHTML = `<span>Hoş Geldin, ${username}!</span>`;

loginButton.disabled = true;

document.querySelectorAll('.input-group').forEach(group => {

group.style.opacity = '0.5';

group.style.pointerEvents = 'none';

});

// Sayfayı yeniden yüklemeden önce geçiş animasyonu

setTimeout(() => {

// Geçiş efekti

const transition = document.createElement('div');

transition.style.position = 'fixed';

transition.style.top = '0';

transition.style.left = '0';

transition.style.width = '100%';

transition.style.height = '100%';

transition.style.backgroundColor = 'var(--primary-color)';

transition.style.opacity = '0';

transition.style.zIndex = '9999';

transition.style.transition = 'opacity 1s ease';

document.body.appendChild(transition);

// Geçiş animasyonu

setTimeout(() => {

transition.style.opacity = '0.8';

setTimeout(() => {

// Burada normalde bir redirect olacaktı

// Şimdilik sayfayı yenileyelim

alert('Giriş başarılı! Ana sayfaya yönlendiriliyorsunuz...');

// location.reload(); // Gerçek senaryoda burası redirect olacak

}, 1000);

}, 100);

}, 1500);

});

// Kayıt ol butonuna tıklandığında kayıt formunu göster

document.getElementById('register-btn').addEventListener('click', function(e) {

e.preventDefault();

showRegisterForm();

});

}

// Kayıt formunu ayarla

function setupRegistrationForm() {

const loginContainer = document.querySelector('.login-container');

const registerForm = document.getElementById('register-form');

const registerBtn = document.getElementById('register-btn');

const backToLoginBtn = document.getElementById('back-to-login');

const signupForm = document.getElementById('signup-form');

// Kayıt formunu göster

function showRegisterForm() {

// Login formunu kapat

loginContainer.style.opacity = '0';

setTimeout(() => {

loginContainer.style.display = 'none';

// Kayıt formunu göster

registerForm.style.display = 'block';

setTimeout(() => {

registerForm.style.opacity = '1';

registerForm.classList.add('active');

}, 50);

}, 500);

}

// Giriş formuna geri dön

function hideRegisterForm() {

registerForm.style.opacity = '0';

registerForm.classList.remove('active');

setTimeout(() => {

registerForm.style.display = 'none';

// Giriş formunu tekrar göster

loginContainer.style.display = 'block';

setTimeout(() => {

loginContainer.style.opacity = '1';

}, 50);

}, 500);

}

// Geri dön butonuna tıklandığında

backToLoginBtn.addEventListener('click', function(e) {

e.preventDefault();

hideRegisterForm();

});

// Kayıt formunu gönderme

signupForm.addEventListener('submit', function(e) {

e.preventDefault();

// Şifre doğrulama

const password = document.getElementById('new-password').value;

const confirmPassword = document.getElementById('confirm-password').value;

if (password !== confirmPassword) {

alert('Şifreler eşleşmiyor!');

return;

}

// Kayıt animasyonu

const username = document.getElementById('new-username').value;

const registerButton = this.querySelector('.register-button');

registerButton.innerHTML = `<span>Hesabınız Oluşturuluyor...</span>`;

registerButton.disabled = true;

document.querySelectorAll('#signup-form .input-group').forEach(group => {

group.style.opacity = '0.5';

group.style.pointerEvents = 'none';

});

// Başarılı kayıt efekti

setTimeout(() => {

registerButton.innerHTML = `<span>Hoş Geldin, ${username}!</span>`;

// Geçiş efekti

setTimeout(() => {

// Geçiş efekti

const transition = document.createElement('div');

transition.style.position = 'fixed';

transition.style.top = '0';

transition.style.left = '0';

transition.style.width = '100%';

transition.style.height = '100%';

transition.style.backgroundColor = 'var(--tertiary-color)';

transition.style.opacity = '0';

transition.style.zIndex = '9999';

transition.style.transition = 'opacity 1s ease';

document.body.appendChild(transition);

// Geçiş animasyonu

setTimeout(() => {

transition.style.opacity = '0.8';

setTimeout(() => {

alert('Kayıt başarılı! Ana sayfaya yönlendiriliyorsunuz...');

// location.reload(); // Gerçek senaryoda burası redirect olacak

}, 1000);

}, 100);

}, 1500);

}, 2000);

});

}

// Logo etkileşimleri

function setupLogoInteractions() {

const logos = document.querySelectorAll('.logo');

logos.forEach(logo => {

logo.addEventListener('mouseenter', function() {

const bot = this.querySelector('.bot');

// 3D "float" efekti

bot.style.transform = 'translateZ(40px) rotateY(10deg)';

bot.style.filter = 'drop-shadow(0 0 20px currentColor)';

// İçindeki robotun pulsating efekti

bot.style.animation = 'none';

void bot.offsetWidth; // Reflow

bot.style.animation = 'pulse 0.6s infinite';

});

logo.addEventListener('mouseleave', function() {

const bot = this.querySelector('.bot');

bot.style.transform = '';

bot.style.filter = '';

// Orijinal animasyona geri dön

if (bot.classList.contains('bot-1')) {

bot.style.animation = 'pulse 3s ease-in-out infinite';

} else if (bot.classList.contains('bot-2')) {

bot.style.animation = 'float 4s ease-in-out infinite';

} else if (bot.classList.contains('bot-3')) {

bot.style.animation = 'rotate 5s linear infinite';

}

});

// Tıklama efekti

logo.addEventListener('click', function() {

const bot = this.querySelector('.bot');

// Botların hepsini döndür

document.querySelectorAll('.bot').forEach(b => {

b.style.transform = 'scale(0.8)';

setTimeout(() => {

b.style.transform = '';

}, 300);

});

// Random renkler belirle

const colors = ['#00f7ff', '#9c27b0', '#00ff9d', '#ff7700', '#ff00d4'];

const randomColor = colors[Math.floor(Math.random() * colors.length)];

// Geçici renk değişimi

bot.style.color = randomColor;

bot.style.filter = `drop-shadow(0 0 30px ${randomColor})`;

setTimeout(() => {

bot.style.color = '';

bot.style.filter = '';

}, 1000);

});

}

Um código de Metehan

Recomendado

Página de destino do desenvolvedor HTML CSS

Tulipa Roxa

Um Código por alejandrokundrah

HTML

CSS

JS

Recomendado

Página de destino do desenvolvedor HTML CSS

Tulipa Roxa

Um Código por alejandrokundrah

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS