caixa de mosca para animação de jogos

Abrir no Editor Video Publique Seu Código

Recomendado

4 August 2025

Página de destino da agência imobiliária

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>

caixa de mosca para animação de jogos

Recomendado

Déjà vu digital

PLACA DE CONEXÃO

Página de destino da agência imobiliária

HTML

CSS

JS

Recomendado

Déjà vu digital

PLACA DE CONEXÃO

Página de destino da agência imobiliária

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS