CSS Animation Floating Particles Example

<!doctype html>
<title>Example</title>
<style>
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    font-family: sans-serif;
    background-color: #0f172a; /* Deep blue night sky */
}

.particles-container {
    width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
}

.particle {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5); /* Semi-transparent white */
    border-radius: 50%;
    /* Start them off the bottom of the screen */
    bottom: -10%; 
    
    /* 
       1. float-up: carries them upward at varying speeds.
       2. fade-out: makes them disappear before hitting the top.
    */
    animation: 
        float-up 8s infinite linear,
        fade-out 8s infinite ease-out;
}

/* Adding glowing variations */
.particle.glow {
    box-shadow: 0 0 10px 2px rgba(255, 255, 255, 0.8);
    background-color: white;
}

/* Manually placing a few for the demo. In a real app, you might generate 50 of these via JS */
.p1 { left: 10%; width: 5px; height: 5px; animation-duration: 9s; animation-delay: 0s; }
.p2 { left: 25%; width: 8px; height: 8px; animation-duration: 14s; animation-delay: 2s; }
.p3 { left: 45%; width: 3px; height: 3px; animation-duration: 7s; animation-delay: 4s; }
.p4 { left: 65%; width: 12px; height: 12px; animation-duration: 18s; animation-delay: 1s; }
.p5 { left: 85%; width: 6px; height: 6px; animation-duration: 11s; animation-delay: 3s; }

@keyframes float-up {
    to {
        transform: translateY(-120vh) translateX(20px); /* Drift up and slightly right */
    }
}

@keyframes fade-out {
    0% { opacity: 0; }
    20% { opacity: 1; }
    80% { opacity: 1; }
    100% { opacity: 0; } /* Fade out near the top */
}

@media (prefers-reduced-motion: reduce) {
    .particle {
        display: none; /* Safest to remove moving background cruft entirely */
    }
}
</style>