CodePen Embed - Pure CSS Video Part 1: Solar Sojourn

<div>
  <button></button> <button></button>
  <x>
    <y>
      <stars></stars>
      <sun>
        <rays>
          <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u>
        </rays>
        <flat>
          <sun2>
            <u>
              <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u>
              <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u> <u></u>
            </u>
          </sun2>
        </flat>
      </sun>
      <sputnik>
        <u></u> <u></u><u></u> <u></u>
      </sputnik>
      <earth><u></u></earth>
      <tbc>
        <u>To be continued...</u><u>To be continued...</u><u>To be continued...</u><u>To be continued...</u><u>To be continued...</u>
      </tbc>
    </y>
  </x>
  <a class="sig" href="https://tinydesign.co.uk/" title="Ben Evans Portfolio"><u></u></a>
</div>

$blk: #1a0606;
$none: rgba(#fff, 0);
$white: #fff;
$red: #d73a4d;
$sun: #fffda4;
$s2: #fb7417;
$s2: $sun;
$lte: rgba($sun, 0.3);
$blue: #4cb7fb;
$blue: lighten($blue, 20);
$green: #b6ff00;
$rotatey: -30deg;
$longtime: 30s;
$time1: 15s;

html {
    background: #1E1F26;
    font-size: 1.1vw;
}

@media (min-aspect-ratio: 16/9) {
    html {
        font-size: 1.8vh;
    }
}

body {
    overflow: hidden;
    display: flex;
    align-items: center;
    margin: 0;
}

x,
y,
button,
html,
body {
    width: 100%;
    height: 100%;
}

div {
    width: 100rem;
    aspect-ratio: 16/9;
    transform-style: preserve-3d;
    perspective: 100em;
    position: relative;
    overflow: hidden;
    margin: auto;
    background: radial-gradient(circle at top, $blk 50%, #220d08);
    box-shadow: 0 0 10rem rgba($lte,.1);

    *,
    *:before,
    *:after,
    &:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        box-sizing: border-box;
        transform-style: preserve-3d;
    }
}

button {
    inset: 0;
    z-index: 1;
    background: none;
    border: none;
    margin: 0;
    padding: 0;

    &:after {
        width: 8rem;
        aspect-ratio: 1/1;
        inset: -100%;
        margin: auto;
        background: linear-gradient(-45deg, $white, $white 50%, $none 50%, $none);
        transform: translate3d(-2rem,0,0) scaleY(0.5) rotate(-45deg);
        transition: 0.5s ease-in-out;
        cursor: pointer;
    }

    &:hover:after {
        transform: translate3d(-2rem,0,0) scaleY(0.5) rotate(-45deg) scale(1.1);
    }
}

// comment out to flatten

x {
    transform: translate3d(120rem, 0rem, -300rem) rotateY(-17deg);
}

// @import "css-sig";
.sig {
    &,
    * {
        height: 9.25em;
        overflow: hidden;
        border-radius: 0.5em;
    }

    position: absolute;
    left: auto;
    right: 1rem;
    top: 1rem;
    font-size: 0.4rem;
    color: $white;
    width: 10em;
    transform: skewX(10deg) scaleY(0.45) rotate(2deg);
    mix-blend-mode: difference;
   z-index: 3;

    &:before,
    *:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 5em;
        height: 5em;
        background: currentColor;
        transform: translate3d(-2.5em, 0, 0) rotate(-45deg);
        box-shadow: -3em 3em 0 0 currentColor;
        border-radius: 0.5em 2em 0.5em 2em;
    }

    * {
        width: 5em;
        transform: translate3d(3.75em, 0, 0) scaleY(0.95);
        display: block !important;

        &:before {
            transform: translate3d(-3em, -2em, 0) rotate(-45deg);
            box-shadow: -3em 3em 0 0 currentColor, -6em 6em 0 0 currentColor;
            border-radius: 0.5em;
        }
    }
}

// @import "stars";
$starscolour: #fff, lighten($red, 20);

@function stars($a, $b) {
    $value: "#{random(600)}rem #{random(150)}rem "+$b+" "+"#{nth($starscolour, random(length($starscolour)))}";

    @for $i from 2 through $a {
        $value: "#{$value} , #{random(600)}rem #{random(150)}rem "+$b+" "+"#{nth($starscolour, random(length($starscolour)))}";
    }

    @return unquote($value);
}

$stars: stars(100, 0.1rem);

stars {
    &:before,
    &:after {
        transform: translate3d(-3000rem, -400rem, -1000rem) scale(8);
        content: "";
        width: 0.3rem;
        height: 0.3rem;
        background: #fff;
        box-shadow: $stars;
        right: 0;
        margin: auto;
    }
}
// @import "sun2";

sun,
sun2 {
    &,
    & > u,
    &:before,
    &:after,
    & > u > u {
        width: 70em;
        border-radius: 50%;
        margin: auto;
        inset: 0;
        aspect-ratio: 1/1;
    }
}

rays {
    margin: auto;
    inset: 0;
    width: 0;
    height: 0;
    transform: scale(3);

    &:before {
        width: 100rem;
        border-radius: 50%;
        aspect-ratio: 1/1;
        background: radial-gradient(at bottom left, $none, $red);
        transform: translate3d(0rem, -120rem, -100rem) rotate(30deg) rotateX(-20deg) scale(1.5) scaleX(1.4);
        filter: drop-shadow(0 -120rem 0 rgba($blue, 0.5)) drop-shadow(0 -200rem 0 rgba($green, 0.5)) drop-shadow(0 -450rem 0 rgba($red, 0.5)) blur(5rem) brightness(2);
        opacity: 0.1;
    }

    &:after {
        width: 300rem;
        border-radius: 50%;
        aspect-ratio: 1/1;
        background: radial-gradient(at bottom left, $none, $red);
        transform: translate3d(100rem, -600rem, -100rem) rotate(30deg) rotateX(-10deg) scale(1.8) scaleX(1.1);
        filter: drop-shadow(0 -400rem 0 rgba($blue, 0.5)) blur(10rem) brightness(2);
        opacity: 0.05;
    }

    & > u {
        opacity: 1;
        transform: scaleX(1.5);

        &,
        &:before,
        &:after {
            width: 200rem;
            height: 10rem;
            background: radial-gradient(at 0, rgba(#fff, 0.5), $none, $none),
            //
            linear-gradient( 90deg, $none, rgba(#fff, 0.1), rgba($red, 0.2), rgba($blue, 0.05), rgba($green, 0.025), $none );
            transform-origin: 0;
            margin: auto;
            bottom: 0;
            transform: rotate(0) rotateY($rotatey);
        }

        &:before {
            transform: rotate(10deg);
        }

        &:after {
            transform: rotate(-10deg);
        }

        @for $i from 2 through 9 {
            &:nth-of-type(#{$i}) {
                transform: rotate($i * 36deg) rotateY($rotatey * random(2));
                width: (200rem + random(100));
                height: (10rem + random(10));

                &,
                &:before,
                &:after {
                    animation: twinkle 8s -#{$i + random(10)}s linear infinite;
                }
            }
        }

        &:nth-of-type(1),
        &:nth-of-type(5) {
            width: 700rem;
            height: 20rem;
        }

        &:nth-of-type(10) {
            transform: rotate(400deg) rotateY($rotatey);
        }
    }
}

sun {
    // comment out to flatten
    transform: scale(0.05) rotate(-5deg);

    &:after {
        width: 1000rem;
        height: 100rem;
        background: linear-gradient( 90deg, $none, rgba($red, 0.2), rgba($blue, 0.1), rgba($green, 0.1), $none );
        transform-origin: 0;
        transform: translate3d(35rem, 0, 0) scale(2) rotateY(-18deg);
        filter: blur(2rem) brightness(0);
    }

    &:before {
        filter: blur(5rem);
        background: radial-gradient( #fff, rgba($red, 0.1) 10%, rgba($blue, 0.1), $none );
        transform: scale(20);
        opacity: 0.5;
    }
}

sun2 {
    &:before {
        background: radial-gradient(closest-side, $white, $sun, $s2 95%, $none);
        transform: translate3d(0, 0, 5rem);
    }

    &:after {
        background: $red;
        transform: translate3d(0, 0, 40rem) scale(1.3);
        -webkit-mask-image: radial-gradient( closest-side, $none, $none, #fff 80%, $none );
        opacity: 0.5;
    }
}

flat {
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    transform-style: flat;
}
// @import "sputnik";
sputnik {
    width: 30rem;
    aspect-ratio: 1/1;
    margin: auto;
    inset: 0;
    transform: translate3d(-1300rem, -100rem, -300rem) rotateX(10deg) rotate(-6deg);

    &:before {
        width: 30rem;
        aspect-ratio: 1/1;
        margin: auto;
        inset: 0;
        border-radius: 50%;
        background: radial-gradient( circle at 80% 70%, $white, darken($white, 80) 40%, lighten($blk, 5), $blk );
        transform: rotateX(-20deg);
    }

    u {
        height: 1rem;
        width: 80rem;
        background: $white;
        transform: translate3d(-60rem, 15rem, 20rem) rotateX(0deg) rotateY(10deg) scaleX(-1);
        border-radius: 0.2rem;

        &:after {
            height: 2rem;
            width: 3rem;
            background: darken($white, 50);
            transform: translate3d(-0.2rem, -0.5rem, 0.2rem);
            border-radius: 0.2rem;
        }

        &:before {
            height: 1.4rem;
            width: 10rem;
            background: darken($red, 30);
            transform: translate3d(0, -0.2rem, 0.2rem);
            border-radius: 0.2rem;
        }
    }

    u:nth-of-type(2) {
        transform: translate3d(-60rem, 35rem, 0) rotateX(-90deg) rotateY(10deg) scaleX(-1);
    }

    u:nth-of-type(3) {
        transform: translate3d(-60rem, 15rem, -20rem) rotateX(-180deg) rotateY(10deg) scaleX(-1);
    }

    u:nth-of-type(4) {
        transform: translate3d(-60rem, -5rem, 0) rotateX(-270deg) rotateY(10deg) scaleX(-1);
    }
}

// @import "earth";

earth {
    transform: translate3d(-2500rem,-200rem,-1000rem);

    &, & > u, &:before {
        width: 88em;
        border-radius: 50%;
        margin: auto;
        inset: 0;
        aspect-ratio: 1/1;
    }

    &:before {
        background: radial-gradient(circle, darken($blue,10), $none, $none );
        transform: scale(1.8);
    }

    & > u {
 
        box-shadow: inset 0 0 5em rgba($white,.25),0 0 3em rgba($white,.25), 0 0 5em $blue;
        background: radial-gradient(circle at 70% 70%, $blue, $blk 90%, $blk );
      

        &:after, &:before {
            width: 10rem;
            aspect-ratio: 1/1;
            border-radius: 50%;
            margin: auto;
            transform: translate3d(0,83em,0);
            right: 0;
            background: radial-gradient(closest-side, #fff, $none);
            opacity: .25;
        }

        &:before {
            width: 20rem;
            height: 5rem;
            transform: translate3d(0,80em,0);
        }
  }
}

tbc {
    transform: translate3d(-2500rem, -200rem, 4rem) rotateX(3000deg) scale(.05) scaleY(1);
    color: $white;
    font-size: 3rem;
    font-family: system-ui;
    animation: tbc 15s 15s ease-in-out forwards;
    margin: auto;
    inset: 0;
    height: 4rem;
    width: 25rem;
    text-align: center;

    u {
        text-align: center;
        width: 25rem;
        text-decoration: none;

        @for $i from 2 through 5 {
            &:nth-of-type(#{$i}) {
                transform: translateZ(-#{($i - 1) / 10}rem);
                filter: contrast( #{$i / 10});
            }
        }
    }
}

@keyframes twinkle {
    50% {
        opacity: 0.2;
    }
}



div:has(button:nth-of-type(2):focus) {
    button:nth-of-type(2) {
        z-index: -1;
    }

    button:after {
        display: none;
    }
  
  @keyframes r {
    to {
        transform: rotateX(360deg);
    }
}

    @keyframes tbc {
        39% {
            transform: translate3d(-2500rem, -200rem, 4rem) rotateX(360deg) scale(.1) scaleY(1);
        }

        45% {
            transform: translate3d(-2500rem, -200rem, 4rem) rotateX(0deg) scale(1) scaleY(1);
        }

        90%, 100% {
            transform: translate3d(-2500rem, -195rem, 4rem) rotateX(80deg) scaleY(2);
        }
    }

    x {
        animation: pass $longtime ease-in-out forwards;
    }

    @keyframes pass {
        30% {
            transform: translate3d(0, -30rem, 10rem);
        }

        50%, 52% {
            transform: translate3d(1030rem, 80rem, 30rem);
        }

        60% {
            transform: translate3d(2500rem, 200rem, 0);
        }

        100% {
            transform: translate3d(2500rem, 200rem, 100rem);
        }
    }
    // animation rays

    rays {
        animation: rays $time1 ease-in-out forwards;

        u,
        &:before,
        &:after {
            animation: rays2 $time1 ease-in-out forwards;
        }
    }

    @keyframes rays {
        30%, 100% {
            transform: rotate(-10deg) scale(3);
        }
    }

    @keyframes rays2 {
        35%, 100% {
            opacity: 0;
        }
    }
    // animation zoom

    sun {
        animation: zoom $time1 ease-in-out forwards;

        @keyframes zoom {
            //should be 60%
            60% {
                transform: translate3d(0, 0, 0) scale(0.6) rotate(0deg);
            }

            100% {
                transform: translate3d(-1000rem, 0, 0) scale(0.9) rotate(0deg);
            }
        }

        &:before {
            animation: rays2 20s ease-in-out forwards;
        }

        &:after {
            animation: flare 8s ease-in-out forwards;
        }

        @keyframes flare {
            100% {
                transform: translate3d(35rem, 0, 0) scale(2) rotateY(-180deg);
                opacity: 0;
                filter: blur(2rem) brightness(2);
            }
        }
    }

    sun2 {
        animation: light 1s 3s forwards;
        visibility: hidden;

        @keyframes light {
            0%, 100% {
                visibility: visible;
            }
        }
    }
    //spunik
    sputnik {
        animation: sputnik 15s 10s linear forwards;

        &:before {
            animation: sputnik2 15s 10s linear forwards;
        }

        @keyframes sputnik {
            1% {
                display: block;
            }

            99% {
                transform: translate3d(-100rem, -100rem, -300rem) rotateX(10deg) rotateX(90deg) rotateZ(10deg) rotate(6deg);
                display: block;
            }

            100% {
                display: none;
            }
        }

        @keyframes sputnik2 {
            100% {
                transform: rotateX(-90deg) rotate(90deg);
            }
        }
    }

    flat {
        &:before {
            background: $sun;
            width: 70rem;
            aspect-ratio: 1/1;
            border-radius: 50%;
            animation: light2 1s 4s forwards;
        }

        @keyframes light2 {
            0%, 100% {
                visibility: hidden;
            }
        }
    }

    sun2 {
        & > u {
            animation: r 9s 5s linear infinite;

            &,
            & > u {
                box-shadow: 1em 0 3em $sun;
            }

            @for $i from 1 through 24 {
                & > u:nth-of-type(#{$i}) {
                    transform: rotateY(($i + 80) * 10deg) rotateX((random(10) - 5) * 10deg) rotate((random(90) + 45) * 10deg);
                }
            }
        }
    }
}

View Compiled

// ☕ No images 
// 📜 No JavaScript 
// 🧙‍♂️ CSS - And a sprinkling of HTML

// 🔗 linktr.ee/ivorjetski

// The making of: 
// 📺 https://www.youtube.com/watch?v=BYOcvxCyG5I

// The video with music:
// 🎵 https://www.youtube.com/watch?v=BYOcvxCyG5I&t=517s

This Pen is owned by Ben Evans on CodePen.

See more by @ivorjetski on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.