WEBLEB
Início
Editor
Entrar
Pro
Português
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Um loop quadrático com CSS
1657
Metehan
Abrir no Editor
Publique Seu Código
Recomendado
25 November 2025
Código-fonte HTML5 do jogo Stick Merge
22 August 2025
PowerZone Fitness: Academia, Treinamento e Associação HTML
5 June 2024
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); });
