आधुनिक एनीमेशन

अनुशंसित

17 May 2025

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

HTML

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

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

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

.flying-box {
      width: 60px;
      height: 60px;
      position: absolute;
      bottom: 0;
      left: 50%;
      transform-style: preserve-3d;
      transform: translateX(-50%) rotateX(0deg);
      animation: fly3D 6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      opacity: 0;
      animation-delay: var(--delay);
    }

.box-face {
      position: absolute;
      width: 100%;
      height: 100%;
      border: 2px solid rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.8);
      backface-visibility: hidden;
    }

.front {
      background: linear-gradient(45deg, #FF416C, #FF4B2B);
      transform: translateZ(30px);
    }

.back {
      background: linear-gradient(45deg, #FF4B2B, #FF416C);
      transform: rotateY(180deg) translateZ(30px);
    }

.right {
      background: linear-gradient(45deg, #ff7b00, #ff8800);
      transform: rotateY(90deg) translateZ(30px);
      width: 60px;
    }

.left {
      background: linear-gradient(45deg, #ff8800, #ff7b00);
      transform: rotateY(-90deg) translateZ(30px);
      width: 60px;
    }

.top {
      background: linear-gradient(45deg, #ff0000, #ff5252);
      transform: rotateX(90deg) translateZ(30px);
      height: 60px;
    }

.bottom {
      background: linear-gradient(45deg, #cc0000, #ff0000);
      transform: rotateX(-90deg) translateZ(30px);
      height: 60px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }

@keyframes fly3D {
      0% {
        transform: translate3d(var(--startX), 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg);
        opacity: 1;
      }
      20% {
        opacity: 1;
      }
      100% {
        transform: translate3d(var(--endX), -150vh, -1000px) rotateX(720deg) rotateY(360deg) rotateZ(180deg);
        opacity: 0;
      }
    }

.shadow {
      position: absolute;
      width: 70px;
      height: 20px;
      background: radial-gradient(ellipse at center, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 70%);
      border-radius: 50%;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%) scale(1);
      animation: shadowFade 6s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
      animation-delay: var(--delay);
      filter: blur(5px);
    }

@keyframes shadowFade {
      0% {
        transform: translateX(-50%) scale(1);
        opacity: 0.8;
      }
      70% {
        transform: translateX(-50%) scale(0.3);
        opacity: 0.3;
      }
      100% {
        transform: translateX(-50%) scale(0);
        opacity: 0;
      }
    }
  </style>
</head>
<body>

function getRandomColor() {
    return colors[Math.floor(Math.random() * colors.length)];
  }

// Gölge ekle
    const shadow = document.createElement('div');
    shadow.classList.add('shadow');
    shadow.style.setProperty('--delay', delay);
    gameArea.appendChild(shadow);
    
    gameArea.appendChild(box);

// Animasyon bittikten sonra DOM'dan kaldır
    setTimeout(() => {
      box.remove();
      shadow.remove();
    }, 6000);
  }

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

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

// Pencere boyutu değiştiğinde yeniden ayarla
  window.addEventListener('resize', () => {
    document.querySelectorAll('.flying-box, .shadow').forEach(el => el.remove());
    for (let i = 0; i < 8; i++) {
      setTimeout(createFlyingBox, i * 600);
    }
  });
</script>

</body>
</html>

आधुनिक एनीमेशन

अनुशंसित

आधुनिक सामाजिक

घड़ी एनीमेशन

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

HTML

CSS

JS

अनुशंसित

आधुनिक सामाजिक

घड़ी एनीमेशन

शुद्ध सीएसएस वन डिव हाउस उत्तरदायी एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS