body { margin: 0; overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #1C1C1C; } .leaf { position: absolute; width: 10px; height: 10px; background-color: #228B22; border-radius: 50%; opacity: 0; animation: fall infinite linear; } @keyframes fall { 0% { opacity: 0; transform: translateY(0) rotate(0); } 10% { opacity: 1; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh) rotate(720deg); } } function createLeaf() { const leaf = document.createElement('div'); const posX = Math.random() * window.innerWidth; leaf.style.left = `${posX}px`; leaf.style.animationDuration = `${Math.random() * 4 + 4}s`; leaf.style.animationDelay = `${Math.random() * 4}s`; leaf.classList.add('leaf'); document.body.appendChild(leaf); setTimeout(() => { document.body.removeChild(leaf); }, (parseFloat(leaf.style.animationDuration) * 1000) - 100); } setInterval(createLeaf, 1000);