WEBLEB
होम
संपादक
लॉग इन करें
Pro
हिंदी
English
Français
Español
Português
Deutsch
Italiano
हिंदी
सीएसएस के साथ एक द्विघात लूप
1106
Metehan
संपादक में खोलें
अपना कोड प्रकाशित करें
अनुशंसित
3 September 2024
बड़ा चक्का
9 July 2025
कार्ड शैली
6 January 2025
एक आधुनिक होम पेज
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); });
