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

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

अनुशंसित

13 September 2025

ब्लॉगस्पॉट CSS3 के लिए छवि स्लाइडर

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

डैडिश गेम HTML5 एम्बेड

ब्लॉगस्पॉट CSS3 के लिए छवि स्लाइडर

HTML

CSS

JS

अनुशंसित

CSS लोडिंग बार एनीमेशन HTML

डैडिश गेम HTML5 एम्बेड

ब्लॉगस्पॉट CSS3 के लिए छवि स्लाइडर

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS