Animazione 3D della scatola delle mosche

859 kevekıbhack

Apri nell'Editor Video Pubblica il Tuo Codice

Animazione 3D della scatola delle mosche

Consigliato

13 September 2025

Animazione della barra di caricamento CSS HTML

23 November 2024

Animazione del passaggio del mouse

22 May 2025

Gioco del lancio della moneta

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>

Consigliato

Animazione della barra di caricamento CSS HTML

Animazione del passaggio del mouse

Gioco del lancio della moneta

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS