गेम एनीमेशन के लिए फ्लाई बॉक्स

775 kevekıbhack

संपादक में खोलें अपना कोड प्रकाशित करें

अनुशंसित

26 August 2025

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

12 October 2025

स्पा के लिए

HTML

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

body {
      height: 100vh;
      background: linear-gradient(to top, #aee1f9, #f0f8ff);
      overflow: hidden;
      font-family: Arial, sans-serif;
    }

.game-area {
      position: relative;
      width: 100%;
      height: 100%;
    }

.flying-box {
      position: absolute;
      bottom: 0;
      width: 50px;
      height: 50px;
      background-color: #ff6347;
      border-radius: 10px;
      animation: flyUp 5s linear forwards;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    }

@keyframes flyUp {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      80% {
        opacity: 1;
      }
      100% {
        transform: translateY(-110vh);
        opacity: 0;
      }
    }
  </style>
</head>
<body>

// Uçan kutu oluştur
  function createFlyingBox() {
    const box = document.createElement('div');
    box.classList.add('flying-box');

// Rastgele yatay konum (ekran genişliği içinde)
    const randomLeft = Math.random() * (window.innerWidth - 60);
    box.style.left = `${randomLeft}px`;

gameArea.appendChild(box);

// 5 saniye sonra kutuyu kaldır
    setTimeout(() => {
      box.remove();
    }, 5000);
  }

// Belirli aralıklarla kutu oluştur (oyun içinde rastgele kutular gibi)
  setInterval(() => {
    createFlyingBox();
  }, 1500); // Her 1.5 saniyede bir kutu

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

</body>
</html>

गेम एनीमेशन के लिए फ्लाई बॉक्स

अनुशंसित

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

CSS एनीमेशन परतों का उदाहरण

स्पा के लिए

HTML

CSS

JS

अनुशंसित

सीएसएस एनीमेशन परतें शहर की पृष्ठभूमि

CSS एनीमेशन परतों का उदाहरण

स्पा के लिए

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS