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

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

अनुशंसित

11 September 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>

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

अनुशंसित

CSS एनीमेशन कोड ब्लॉक उदाहरण

CSS लोडिंग स्पिनर एनीमेशन

एनीमेशन लोडिंग

HTML

CSS

JS

अनुशंसित

CSS एनीमेशन कोड ब्लॉक उदाहरण

CSS लोडिंग स्पिनर एनीमेशन

एनीमेशन लोडिंग

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS