Floating Embers | Learning Axis

HTML

CSS

body {
      margin: 0;
      height: 100vh;
      background: radial-gradient(circle at bottom, #1a0000, #000);
      overflow: hidden;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .ember {
      position: absolute;
      bottom: 0;
      width: 12px;
      height: 12px;
      background: radial-gradient(circle, rgba(255, 140, 0, 1) 0%, rgba(255, 69, 0, 1) 60%, rgba(0, 0, 0, 0) 100%);
      border-radius: 50%;
      pointer-events: none;
      animation: rise linear infinite, drift ease-in-out infinite;
      opacity: 0.8;
    }
    @keyframes rise {
      0% {
        transform: translateY(0) scale(0.5);
        opacity: 0.8;
        top: 100%;
      }
      50% {
        opacity: 1;
        
      }
      100% {
        transform: translateY(-120vh) scale(1.2);
        opacity: 0;
        top: 0;
      }
    }
    @keyframes drift {
      0%, 100% {
        transform: translateX(0);
      }
      50% {
        transform: translateX(10px);
      }
    }