Animation 3D d'une boîte à mouches

1,272 kevekıbhack

Ouvrir dans l'éditeur Publiez votre code

Recommandé

23 September 2025

Extrait HTML d'animation de chargement CSS

18 May 2024

Formulaire de connexion flou

22 May 2025

Application vocale

HTML

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>3B Uçan Kutu</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

body, html {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: linear-gradient(to top, #dbeafe, #f0f8ff);
      font-family: sans-serif;
    }

.game-area {
      width: 100%;
      height: 100%;
      perspective: 1000px;
      position: relative;
      overflow: hidden;
    }

.flying-box {
      width: 50px;
      height: 50px;
      background: linear-gradient(45deg, #ff6347, #ff4500);
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 8px;
      box-shadow: 0 5px 15px rgba(0,0,0,0.2);
      animation: fly3D 4s linear forwards;
    }

@keyframes fly3D {
      0% {
        transform: translate3d(-50%, 0, 0) rotateX(0deg);
        opacity: 1;
      }
      70% {
        transform: translate3d(-50%, -60vh, -300px) rotateX(180deg);
        opacity: 1;
      }
      100% {
        transform: translate3d(-50%, -120vh, -600px) rotateX(360deg);
        opacity: 0;
      }
    }
  </style>
</head>
<body>

function createFlyingBox() {
    const box = document.createElement('div');
    box.classList.add('flying-box');

// Rastgele yatay konum (kutu merkezden farklı yerden başlasın)
    const left = Math.random() * (window.innerWidth - 100);
    box.style.left = `${left}px`;

gameArea.appendChild(box);

// 4 saniye sonra DOM'dan kaldır
    setTimeout(() => {
      box.remove();
    }, 4000);
  }

// Sürekli kutu oluştur
  setInterval(() => {
    createFlyingBox();
  }, 1200); // Her 1.2 saniyede bir

// Başlangıçta birkaç kutu
  for (let i = 0; i < 3; i++) {
    setTimeout(createFlyingBox, i * 800);
  }
</script>

</body>
</html>

CSS