animación moderna

470 kevekıbhack

Abrir en el editor Publica tu código

Recomendado

20 September 2025

Animación de carga de CSS Spinner

24 May 2024

animaciones de tarjetas

10 August 2025

Animación CSS de nave espacial extraterrestre con estrellas

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>

Recomendado

Animación de carga de CSS Spinner

animaciones de tarjetas

Animación CSS de nave espacial extraterrestre con estrellas

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS