<!-- https://css-doodle.com -->

​

<css-doodle>

    :doodle { @grid: 1x35 / 100vw 100vh; } 

    :container { 

        background: linear-gradient(to top, rgba(0, 0, 0, .1) 0%, #aaf9ff 70%, transparent 100%); 

        margin: 0 auto;

        background-repeat: no-repeat; 

        max-width: 740px;

        overflow: hidden;

        transform-style: preserve-3d;

        perspective: 15px;

        animation: move 15s infinite linear alternate;

    } 

    @nth(2n) {

        --hslh: @pick(90, 100);

        --hsls: @pick(80%, 85%, 90%);

        --color: hsla(var(--hslh), var(--hsls), 50%, 0.9);

        position: relative; 

        width: 1vw;

        height: 2vw;

        border-radius: 50%;

        background: var(--color);

        top: @r(20, 70)vh;

        transform: scale(@r(0.5, 1.3));

        --n: @p(-1, 1, 1.2, -1.2);

        --c: var(--color);

        box-shadow: @m100(

            calc(@sin(@n() / 10) * 2.4vmin * @var(--n))

            calc(@n() * 1vmin) 0

            hsla(var(--hslh), var(--hsls), calc(50% - 1% * 0.2 * @n()), calc(0.9 - 0.011 * @n()))

        );

        transform: translateZ(@r(-5)px);

        z-index: 10;

    }

    @nth(4n + 1) {

        position: relative;

        width: 4.5vh;

        height: 4vh;

        --c: @pick(#bb2d00, #222, #6644a3);

        background: var(--c);

        top: @r(15, 90)vh;

        @shape: @pick(fish, whale);

        transform: translate3d(@r(-200, 200)%, @r(-200, 200)%, @r(-20)px) scale(@r(.8, 1.4)) rotate(calc(@pick(0deg, 180deg)));

        z-index: @pick(5, 15);

        opacity: .8;

        animation: forward .8s infinite @r(0, 1.2)s alternate linear;

        ::before {

            position: absolute;

            content: "";

            width: .5vh;

            height: .5vh;

            background: #fff;

            border-radius: 50%;

            left: 70%;

            top: 45%;

            z-index: 2;

        }

    }

    @nth(7, 27) {

        width: .6vw;

        height: .6vw;

        border-radius: 50%;

        background: rgba(255, 255, 255, .3);

        top: @r(10, 50)%;

        box-shadow:

            0 -8vh .3vh 1.2px rgba(255, 255, 255, .4),

            0 -18vh .3vh 1.6px rgba(255, 255, 255, .5),

            0 -30vh .3vh 2px rgba(255, 255, 255, .6);

        z-index: 1;

        transform: translate(@r(-1000, 1000)%, 0);

    }

​

    @keyframes move {

        100% {

            perspective: 40px;

        }

    }

    @keyframes forward {

        0% {

            left: 0;

        }

        100% {

            left: -3px;

        }

    }

</css-doodle>