WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
CSS ile bir karesel döngü
957
Metehan
Open In Editor
Publish Your Code
Recommended
29 July 2024
Snake game
21 February 2024
Lantern
20 April 2025
gym
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); });
