WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um loop quadrático com CSS
1108
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
20 March 2024
29 June 2025
Um código de Mete
18 March 2025
Um código por anhtuanle2004thl
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>3D Şekiller ve Logo</title> <link rel="stylesheet" href="styles.css"> </head> <body> <!-- 3D Şekiller --> <div class="shape-container"> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> <div class="shape"></div> </div> <!-- Logo --> <div class="logo"> <img src="https://via.placeholder.com/100" alt="Logo"> </div> <!-- Buton --> <button class="button" id="exploreButton">Explore More</button> <script src="script.js"></script> </body> </html>
CSS
Copy
/* Genel Ayarlar */ body { min-height: 100vh; background: linear-gradient(135deg, #1a1a1a, #333); display: flex; align-items: center; justify-content: center; margin: 0; font-family: "Poppins", sans-serif; overflow: hidden; perspective: 1000px; } /* Şekil Konteyneri */ .shape-container { position: relative; width: 300px; height: 300px; perspective: 1000px; } /* 3D Şekiller */ .shape { position: absolute; width: 100px; height: 100px; background: linear-gradient(135deg, #ff6347, #ff4500); /* Eski turuncu tonları */ border-radius: 12px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4); transform-style: preserve-3d; animation: rotateShape 6s infinite linear; } .shape:nth-child(1) { top: 0; left: 0; transform: translateZ(50px); } .shape:nth-child(2) { top: 0; right: 0; transform: translateZ(-50px); background: #CFE1B9; /* Ortadaki şekil için #CFE1B9 rengi */ } .shape:nth-child(3) { bottom: 0; left: 0; transform: translateZ(100px); background: linear-gradient(135deg, #1e90ff, #00bfff); } .shape:nth-child(4) { bottom: 0; right: 0; transform: translateZ(-100px); background: linear-gradient(135deg, #32cd32, #00ff7f); } @keyframes rotateShape { 0% { transform: rotateX(0) rotateY(0); } 100% { transform: rotateX(360deg) rotateY(360deg); } } /* Logo Alanı */ .logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotateX(25deg); width: 150px; height: 150px; background: radial-gradient(circle, #ff4500, #ff6347); border-radius: 50%; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; } .logo img { display: none; /* Resmi kaldırdım */ } /* Modern Buton */ .button { position: absolute; bottom: 10%; left: 50%; transform: translateX(-50%); padding: 0.8rem 1.5rem; font-size: 1.2rem; font-weight: bold; color: #fff; background: linear-gradient(135deg, #ff4500, #ff6347); border: none; border-radius: 25px; cursor: pointer; box-shadow: 0 10px 20px rgba(255, 69, 0, 0.5); transition: all 0.3s ease; } .button:hover { background: linear-gradient(135deg, #ff6347, #ff4500); transform: scale(1.1); }
JS
Copy
// Parmak izi için neon tarama efekti fingerprint.addEventListener('click', function () { if (isScanning) return; isScanning = true; this.style.filter = 'drop-shadow(0 0 30px rgba(255, 0, 255, 0.8))'; // Tarama animasyonu let degree = 0; const scanAnimation = setInterval(() => { degree += 20; this.style.transform = `rotate(${degree}deg) scale(1.2)`; if (degree >= 360) { clearInterval(scanAnimation); this.style.transform = 'rotate(0deg) scale(1)'; this.style.filter = 'drop-shadow(0 0 15px rgba(255, 0, 255, 0.5))'; isScanning = false; } }, 50); }); // 3D şekiller için renk geçiş animasyonu shapes.forEach(shape => { setInterval(() => { const randomHue = Math.random() * 360; shape.style.background = `hsl(${randomHue}, 70%, 50%)`; }, 4000); });
