animazione moderna

999 kevekıbhack

Apri nell'Editor Video Pubblica il Tuo Codice

Consigliato

30 January 2026

Animazione di particelle su tela con interazione con il mouse

17 November 2025

Animazione cliccabile del cuore che esplode

20 September 2025

Animazione di caricamento CSS Spinner

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>

Consigliato

Animazione di particelle su tela con interazione con il mouse

Animazione cliccabile del cuore che esplode

Animazione di caricamento CSS Spinner

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS