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

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

अनुशंसित

12 October 2025

Matter.js के साथ दिल के बुलबुले का एनीमेशन

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 एनीमेशन परतों का उदाहरण

3डी फ्लाई बॉक्स एनीमेशन

Matter.js के साथ दिल के बुलबुले का एनीमेशन

HTML

CSS

JS

अनुशंसित

CSS एनीमेशन परतों का उदाहरण

3डी फ्लाई बॉक्स एनीमेशन

Matter.js के साथ दिल के बुलबुले का एनीमेशन

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS