Un code de Metehan

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 February 2024

Morphing de particules avec Three.js

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Özel Davetiye - Giriş</title>
  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Poppins', sans-serif;
    }

body {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
      background: linear-gradient(135deg, #00f5ff 0%, #ff00ff 25%, #ffff00 50%, #00ff00 75%, #ff4500 100%);
      overflow-x: hidden;
      position: relative;
    }

/* Canlı Arka Plan Desenleri */
    body::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 20% 20%, rgba(0, 255, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 0, 255, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 20% 80%, rgba(255, 255, 0, 0.4) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(0, 255, 0, 0.4) 0%, transparent 50%),
        linear-gradient(45deg, rgba(255, 69, 0, 0.3) 0%, rgba(138, 43, 226, 0.3) 100%);
      animation: backgroundFloat 20s ease-in-out infinite;
      z-index: 0;
    }

body::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: 
        radial-gradient(circle, rgba(0, 255, 255, 0.2) 0%, transparent 20%),
        radial-gradient(circle at 70% 30%, rgba(255, 0, 255, 0.2) 0%, transparent 20%),
        radial-gradient(circle at 30% 70%, rgba(50, 205, 50, 0.2) 0%, transparent 20%);
      animation: rotateBackground 30s linear infinite;
      z-index: 0;
    }

@keyframes backgroundFloat {
      0%, 100% {
        transform: translateY(0px) scale(1);
      }
      50% {
        transform: translateY(-20px) scale(1.05);
      }
    }

@keyframes rotateBackground {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

/* Ana Başlık */
    .main-title {
      position: absolute;
      top: 80px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      z-index: 10;
      color: #fff;
      text-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }

.main-title h1 {
      font-size: 3.5em;
      font-weight: 700;
      margin-bottom: 10px;
      background: linear-gradient(45deg, #00f5ff, #ff00ff, #ffff00, #00ff00, #ff4500);
      background-size: 300% 300%;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      animation: gradientShift 4s ease-in-out infinite;
    }

.main-title p {
      font-size: 1.2em;
      font-weight: 300;
      opacity: 0.9;
    }

@keyframes gradientShift {
      0%, 100% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
    }

/* Konteyner */
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      gap: 60px;
      padding: 50px 20px;
      position: relative;
      z-index: 5;
      margin-top: 120px;
    }

/* Kart Panelleri */
    .panel {
      width: 320px;
      height: 420px;
      position: relative;
      transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      perspective: 1000px;
    }

.panel:hover {
      transform: translateY(-30px) scale(1.05);
    }

/* Halka Efekti */
    .ring {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      width: 100%;  
      height: 100%;
      z-index: 3;
      pointer-events: none;
    }

.ring:before,
    .ring:after {
      content: "";
      position: absolute;
      left: 50%;
      top: 50%;
      width: 110%;
      height: 110%;
      border: 4px solid;
      border-radius: 50%;
      transition: transform 1.2s ease;
      transform: translateX(-50%) translateY(-50%) rotate(45deg);
    }

.ring:before {
      border-color: rgba(0, 255, 255, 0.6) rgba(255, 0, 255, 0.6) transparent transparent;
      z-index: -1;
    }

.ring:after {
      border-color: transparent transparent rgba(255, 255, 0, 0.6) rgba(0, 255, 0, 0.6);
    }

.panel:hover .ring:before,
    .panel:hover .ring:after {
      transform: translateX(-50%) translateY(-50%) rotate(315deg);
    }

/* Kart Tasarımı */
    .card {
      width: 100%;
      height: 100%;
      position: relative;
      background: rgba(255, 255, 255, 0.15);
      backdrop-filter: blur(15px);
      border-radius: 25px;
      border: 2px solid rgba(255, 255, 255, 0.3);
      box-shadow: 
        0 25px 50px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
      transition: all 0.8s ease;
      overflow: hidden;
    }

.panel:hover .card {
      background: rgba(255, 255, 255, 0.2);
      border-color: rgba(255, 255, 255, 0.5);
      box-shadow: 
        0 35px 70px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    }

/* Kart Arka Plan Gradyanları */
    .card1 {
      background: linear-gradient(135deg, rgba(0, 255, 255, 0.3), rgba(138, 43, 226, 0.3));
      border-color: rgba(0, 255, 255, 0.5);
      box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
    }

.card2 {
      background: linear-gradient(135deg, rgba(255, 0, 255, 0.3), rgba(50, 205, 50, 0.3));
      border-color: rgba(255, 0, 255, 0.5);
      box-shadow: 0 0 30px rgba(255, 0, 255, 0.3);
    }

.card3 {
      background: linear-gradient(135deg, rgba(255, 255, 0, 0.3), rgba(255, 69, 0, 0.3));
      border-color: rgba(255, 255, 0, 0.5);
      box-shadow: 0 0 30px rgba(255, 255, 0, 0.3);
    }

/* Kart Arka Plan Görselleri */
    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      opacity: 0.2;
      z-index: -1;
    }

.card1::before {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="vipGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%2300f5ff;stop-opacity:1" /><stop offset="100%" style="stop-color:%238a2be2;stop-opacity:1" /></linearGradient></defs><rect width="400" height="300" fill="url(%23vipGrad)"/><circle cx="200" cy="150" r="80" fill="none" stroke="%23ffffff" stroke-width="3" opacity="0.7"/><text x="200" y="160" text-anchor="middle" fill="%23ffffff" font-size="24" font-weight="bold" opacity="0.8">VIP</text><polygon points="200,100 220,140 260,140 230,165 240,205 200,180 160,205 170,165 140,140 180,140" fill="%23ffffff" opacity="0.6"/></svg>');
    }

.card2::before {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="coupleGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23ff00ff;stop-opacity:1" /><stop offset="100%" style="stop-color:%2332cd32;stop-opacity:1" /></linearGradient></defs><rect width="400" height="300" fill="url(%23coupleGrad)"/><circle cx="160" cy="140" r="40" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.7"/><circle cx="240" cy="140" r="40" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.7"/><path d="M180,160 Q200,180 220,160" stroke="%23ffffff" stroke-width="3" fill="none" opacity="0.8"/><text x="200" y="220" text-anchor="middle" fill="%23ffffff" font-size="18" font-weight="bold" opacity="0.8">COUPLE</text></svg>');
    }

.card3::before {
      background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 300"><defs><linearGradient id="groupGrad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" style="stop-color:%23ffff00;stop-opacity:1" /><stop offset="100%" style="stop-color:%23ff4500;stop-opacity:1" /></linearGradient></defs><rect width="400" height="300" fill="url(%23groupGrad)"/><circle cx="120" cy="120" r="25" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.7"/><circle cx="200" cy="100" r="30" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.7"/><circle cx="280" cy="120" r="25" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.7"/><circle cx="160" cy="170" r="25" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.7"/><circle cx="240" cy="170" r="25" fill="none" stroke="%23ffffff" stroke-width="2" opacity="0.7"/><text x="200" y="230" text-anchor="middle" fill="%23ffffff" font-size="16" font-weight="bold" opacity="0.8">GROUP EVENT</text></svg>');
    }

/* İçerik */
    .content {
      position: relative;
      width: 100%;
      height: 100%;
      padding: 40px 30px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      z-index: 2;
    }

.content::before {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
      z-index: -1;
      transition: all 0.8s ease;
      opacity: 0;
    }

.panel:hover .content::before {
      opacity: 1;
      animation: glowRotate 6s linear infinite;
    }

@keyframes glowRotate {
      0% {
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }

/* Başlık */
    .title {
      font-size: 2.2em;
      font-weight: 700;
      color: #fff;
      text-align: center;
      margin-bottom: 20px;
      text-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
      position: relative;
      transition: all 0.6s ease;
    }

.title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, transparent, #fff, transparent);
      transition: width 0.6s ease;
    }

.panel:hover .title {
      color: rgba(255, 255, 255, 1);
      text-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
    }

.panel:hover .title::after {
      width: 100px;
    }

/* Alt İçerik */
    .slide {
      background: rgba(0, 0, 0, 0.4);
      border-radius: 20px;
      padding: 25px;
      text-align: center;
      backdrop-filter: blur(15px);
      border: 1px solid rgba(255, 255, 255, 0.2);
      transition: all 0.6s ease;
    }

.panel:hover .slide {
      background: rgba(0, 0, 0, 0.5);
      transform: translateY(-5px);
      border-color: rgba(255, 255, 255, 0.4);
    }

.slide h6 {
      color: rgba(255, 255, 255, 0.95);
      font-size: 1.1em;
      margin-bottom: 15px;
      font-weight: 600;
    }

.invitation-info {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 20px;
    }

.info-line {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: rgba(255, 255, 255, 0.9);
      font-size: 0.95em;
      padding: 8px 0;
      border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

.info-line:last-child {
      border-bottom: none;
    }

.info-line i {
      font-size: 1.1em;
      margin-right: 8px;
      opacity: 0.8;
    }

/* Buton */
    .btn {
      display: inline-block;
      padding: 12px 25px;
      background: rgba(255, 255, 255, 0.2);
      border: 2px solid rgba(255, 255, 255, 0.4);
      border-radius: 30px;
      color: #fff;
      text-decoration: none;
      font-weight: 600;
      transition: all 0.5s ease;
      position: relative;
      overflow: hidden;
      text-align: center;
      font-size: 0.95em;
    }

.btn:hover {
      background: rgba(255, 255, 255, 0.95);
      color: #333;
      border-color: rgba(255, 255, 255, 0.95);
      transform: translateY(-3px);
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
    }

.btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
      transition: 0.6s;
    }

.btn:hover::before {
      left: 100%;
    }

/* Partiküller */
    .particle {
      position: absolute;
      width: 8px;
      height: 8px;
      background: rgba(255, 255, 255, 0.8);
      border-radius: 50%;
      z-index: 1;
      animation: floatUp 12s linear infinite;
    }

@keyframes floatUp {
      0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
      }
      10% {
        opacity: 1;
      }
      90% {
        opacity: 1;
      }
      100% {
        transform: translateY(-100vh) rotate(360deg);
        opacity: 0;
      }
    }

/* Responsive */
    @media (max-width: 768px) {
      .main-title h1 {
        font-size: 2.5em;
      }
      
      .container {
        gap: 40px;
        margin-top: 100px;
      }
      
      .panel {
        width: 280px;
        height: 380px;
      }
    }
  </style>
</head>
<body>
  <div class="main-title">
    <h1>Özel Davetiye</h1>
    <p>Unutulmaz bir deneyime hoş geldiniz</p>
  </div>

<div class="container">
    <div class="panel">
      <div class="ring"></div>
      <div class="card card1">
        <div class="content">
          <div>
            <h2 class="title">VIP Giriş</h2>
            <div class="slide">
              <h6>Premium Deneyim Paketi</h6>
              <div class="invitation-info">
                <div class="info-line">
                  <span><i class="fas fa-calendar"></i>Tarih</span>
                  <span>15 Haziran 2025</span>
                </div>
                <div class="info-line">
                  <span><i class="fas fa-clock"></i>Saat</span>
                  <span>19:00</span>
                </div>
                <div class="info-line">
                  <span><i class="fas fa-star"></i>Kişi</span>
                  <span>1 VIP</span>
                </div>
              </div>
              <a href="#" class="btn">Kabul Et</a>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="ring"></div>
      <div class="card card2">
        <div class="content">
          <div>
            <h2 class="title">Çift Giriş</h2>
            <div class="slide">
              <h6>İkili Özel Davet</h6>
              <div class="invitation-info">
                <div class="info-line">
                  <span><i class="fas fa-calendar"></i>Tarih</span>
                  <span>15 Haziran 2025</span>
                </div>
                <div class="info-line">
                  <span><i class="fas fa-clock"></i>Saat</span>
                  <span>19:30</span>
                </div>
                <div class="info-line">
                  <span><i class="fas fa-users"></i>Kişi</span>
                  <span>2 Kişi</span>
                </div>
              </div>
              <a href="#" class="btn">Kabul Et</a>
            </div>
          </div>
        </div>
      </div>
    </div>

<div class="panel">
      <div class="ring"></div>
      <div class="card card3">
        <div class="content">
          <div>
            <h2 class="title">Grup Giriş</h2>
            <div class="slide">
              <h6>Arkadaş Grubu Daveti</h6>
              <div class="invitation-info">
                <div class="info-line">
                  <span><i class="fas fa-calendar"></i>Tarih</span>
                  <span>15 Haziran 2025</span>
                </div>
                <div class="info-line">
                  <span><i class="fas fa-clock"></i>Saat</span>
                  <span>20:00</span>
                </div>
                <div class="info-line">
                  <span><i class="fas fa-user-friends"></i>Kişi</span>
                  <span>5 Kişi</span>
                </div>
              </div>
              <a href="#" class="btn">Kabul Et</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

// 3D tilt efekti
    function addTiltEffect() {
      const panels = document.querySelectorAll('.panel');
      
      panels.forEach(panel => {
        panel.addEventListener('mousemove', (e) => {
          const rect = panel.getBoundingClientRect();
          const x = e.clientX - rect.left;
          const y = e.clientY - rect.top;
          
          const centerX = rect.width / 2;
          const centerY = rect.height / 2;
          
          const rotateX = (y - centerY) / 8;
          const rotateY = (centerX - x) / 8;
          
          panel.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg) translateY(-30px) scale(1.05)`;
        });
        
        panel.addEventListener('mouseleave', () => {
          panel.style.transform = 'translateY(-30px) scale(1.05)';
        });
      });
    }

// Başlat
    document.addEventListener('DOMContentLoaded', () => {
      createParticles();
      addTiltEffect();
    });
  </script>
</body>
</html>

Un code de Metehan

Recommandé

Boîte de couleur

Un code par smartfunction186

Morphing de particules avec Three.js

HTML

CSS

JS

Recommandé

Boîte de couleur

Un code par smartfunction186

Morphing de particules avec Three.js

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS