WEBLEB
Startseite
Editor
Anmelden
Pro
Deutsch
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Eine quadratische Schleife mit CSS
956
Metehan
Im Editor öffnen
Veröffentlichen Sie Ihren Code
Empfohlen
29 August 2024
24 November 2024
Blume für mein Mädchen
6 April 2025
Ein Code von Ghost????
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); });
