Um código por pan4o

Abrir no Editor Publique Seu Código

Recomendado

15 June 2025

Animações orientadas por rolagem

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="universe">
  <div class="orbit moon"></div>
  <div class="orbit mercury"></div>
  <div class="orbit venus"></div>
  <div class="orbit sun"></div>
  <div class="orbit mars"></div>
  <div class="orbit jupiter"></div>
  <div class="orbit saturn"></div>
  <div class="orbit stars">
    <div class="star" style="--j:0; --y:.1"></div>
    <div class="star" style="--j:1; --y:.5"></div>
    <div class="star" style="--j:2; --y:.2"></div>
    <div class="star" style="--j:3; --y:.1"></div>
    <div class="star" style="--j:4; --y:.6"></div>
    <div class="star" style="--j:5; --y:.2"></div>
    <div class="star" style="--j:6; --y:.9"></div>
    <div class="star" style="--j:7; --y:.4"></div>
    <div class="star" style="--j:8; --y:.3"></div>
    <div class="star" style="--j:9; --y:.5"></div>
    <div class="star" style="--j:10; --y:.3"></div>
    <div class="star" style="--j:11; --y:.4"></div>
    <div class="star" style="--j:12; --y:.7"></div>
    <div class="star" style="--j:13; --y:.8"></div>
    <div class="star" style="--j:14; --y:.1"></div>
    <div class="star" style="--j:15; --y:.2"></div>
    <div class="star" style="--j:16; --y:.9"></div>
    <div class="star" style="--j:17; --y:.4"></div>
    <div class="star" style="--j:18; --y:.3"></div>
    <div class="star" style="--j:19; --y:.5"></div>
    <div class="star" style="--j:20; --y:.9"></div>
    <div class="star" style="--j:21; --y:.2"></div>
    <div class="star" style="--j:22; --y:.6"></div>
    <div class="star" style="--j:23; --y:.2"></div>
    <div class="star" style="--j:24; --y:.8"></div>
    <div class="star" style="--j:25; --y:.7"></div>
    <div class="star" style="--j:26; --y:.1"></div>
    <div class="star" style="--j:27; --y:.3"></div>
    <div class="star" style="--j:28; --y:.4"></div>
    <div class="star" style="--j:29; --y:.7"></div>
    <div class="star" style="--j:30; --y:.8"></div>
    <div class="star" style="--j:31; --y:.3"></div>
    <div class="star" style="--j:32; --y:.4"></div>
    <div class="star" style="--j:33; --y:.7"></div>
    <div class="star" style="--j:34; --y:.8"></div>
    <div class="star" style="--j:35; --y:.1"></div>
    <div class="star" style="--j:36; --y:.2"></div>
    <div class="star" style="--j:37; --y:.9"></div>
    <div class="star" style="--j:38; --y:.4"></div>
    <div class="star" style="--j:39; --y:.3"></div>
    <div class="star" style="--j:40; --y:.2"></div>
    <div class="star" style="--j:41; --y:.8"></div>
    <div class="star" style="--j:42; --y:.7"></div>
    <div class="star" style="--j:43; --y:.1"></div>
  </div>
  <div class="body-container earth">
    <div class="human-lights"></div>
  </div>
  <div class="body-container moon">
    <div class="crater crater-1"></div>
    <div class="crater crater-2"></div>
    <div class="crater crater-3"></div>
    <div class="crater crater-4"></div>
    <div class="crater crater-5"></div>
    <div class="crater crater-6"></div>
  </div>
  <div class="body-container mercury">
    <div class="crater crater-1"></div>
    <div class="crater crater-2"></div>
    <div class="crater crater-3"></div>
    <div class="crater crater-4"></div>
    <div class="crater crater-5"></div>
    <div class="crater crater-6"></div>
    <div class="crater crater-7"></div>
    <div class="crater crater-8"></div>
    <div class="crater crater-9"></div>
    <div class="crater crater-10"></div>
    <div class="crater crater-11"></div>
    <div class="crater crater-12"></div>
    <div class="crater crater-13"></div>
    <div class="crater crater-14"></div>
    <div class="crater crater-15"></div>
    <div class="crater crater-16"></div>
  </div>
  <div class="body venus"></div>
  <div class="body sun"></div>
  <div class="body-container mars">
    <div class="ice-cap"></div>
  </div>
  <div class="body jupiter"></div>
  <div class="body-container saturn">
    <div class="ring-far a"></div>
    <div class="ring-far b"></div>
    <div class="shadow"></div>
    <div class="body-copy"></div>
    <div class="storms">
      <div class="storm"></div>
      <div class="storm"></div>
      <div class="storm"></div>
    </div>
  </div>
  <div class="body-container nebula">
    <div class="part a"></div>
    <div class="part b"></div>
    <div class="body-copy"></div>
  </div>
  <div class="body-container galaxy">
    <div class="arms">
      <div class="arm">
        <div class="arm-depth" style="--d: 0">
          <div class="arm-depth" style="--d: 1">
            <div class="arm-depth" style="--d: 2">
              <div class="arm-depth" style="--d: 3">
                <div class="arm-depth" style="--d: 4">
                  <div class="arm-depth" style="--d: 5">
                    <div class="arm-depth" style="--d: 6">
                                                    </div>
                                                  </div>
                                               </div>
                                            </div>
                                      </div>
                              </div>
                    </div>
      </div>
      <div class="arm">
        <div class="arm-depth" style="--d: 0">
          <div class="arm-depth" style="--d: 1">
            <div class="arm-depth" style="--d: 2">
              <div class="arm-depth" style="--d: 3">
                <div class="arm-depth" style="--d: 4">
                  <div class="arm-depth" style="--d: 5">
                    <div class="arm-depth" style="--d: 6">
                                                    </div>
                                                  </div>
                                               </div>
                                            </div>
                                      </div>
                              </div>
                    </div>
      </div>
    </div>
    <div class="body-copy"></div>
  </div>
</div>  
</body>
</html>

CSS

:root {
  --pov: 66deg;
  --day: 14s;
  --sun-orbit-progress: .7;
  --circle-delay: calc(var(--day) / 3.97);
  --circular-ease: cubic-bezier(.37, 0, .63, 1);
  --bg-color: #111;
  --orbit-sphere-color: hsla(260, 80%, 60%, .6);
  --orbit-line-color: hsl(260 50% 66%);
  --orbit-line-thickness: .15rem;
  --orbit-plane-color: radial-gradient(
    circle at center,
    hsla(250, 70%, 75%, .025),
    hsla(250, 70%, 75%, .15)
  );
  --moon-orbit-size: 12dvmin;
  --mercury-orbit-size: 24dvmin;
  --venus-orbit-size: 36dvmin;
  --sun-orbit-size: 48dvmin;
  --mars-orbit-size: 60dvmin;
  --jupiter-orbit-size: 72dvmin;
  --saturn-orbit-size: 84dvmin;
  --stars-orbit-size: 96dvmin;
  --number-of-bodies: 10;
}

body {
  height: 100dvh;
  margin: 0;
  background: var(--bg-color);
  overflow: hidden;
}

.universe {
  height: 100%;
  perspective: 50000px;
  translate: 0 -5%;
  position: relative;
}

/* orbit line */
:nth-child(1 of :is(.orbit)) { --i: 0; }
:nth-child(2 of :is(.orbit)) { --i: 1; }
:nth-child(3 of :is(.orbit)) { --i: 2; }
:nth-child(4 of :is(.orbit)) { --i: 3; }
:nth-child(5 of :is(.orbit)) { --i: 4; }
:nth-child(6 of :is(.orbit)) { --i: 5; }
:nth-child(7 of :is(.orbit)) { --i: 6; }
:nth-child(8 of :is(.orbit)) { --i: 7; }

.orbit {
  --enter-delay: calc(.1s + var(--i) * (1s / 6));
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--size, 30dvmin);
  height: var(--size, 30dvmin);
  border-radius: 50%;
  background: var(--orbit-plane-color);
  box-shadow: 0 0 0 var(--orbit-line-thickness) var(--orbit-line-color);
  transform-style: preserve-3d;
  rotate: x var(--pov);
  translate: -50% -40%;
  opacity: 0;
  -webkit-animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
          animation: orbit-appear 1.5s var(--enter-delay, .1s) forwards;
}

@-webkit-keyframes orbit-appear {
  to {
    opacity: 1;
    translate: -50% -50%;
  }
}

@keyframes orbit-appear {
  to {
    opacity: 1;
    translate: -50% -50%;
  }
}

/* orbit semi-sphere */
.orbit::after {
  --cutout: calc(var(--size) / 2 + var(--orbit-line-thickness));
  content: "";
  position: absolute;
  top: -75%;
  left: calc(-1 * var(--orbit-line-thickness));
  width: calc(100% + var(--orbit-line-thickness) * 2);
  height: 250%;
  background: radial-gradient(
    circle var(--cutout) at center,
    #0000 99.9%,
    var(--orbit-sphere-color)
  );
  border-radius: 50%;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}

.orbit.moon {
  --size: var(--moon-orbit-size);
}

.orbit.mercury {
  --size: var(--mercury-orbit-size);
}

.orbit.venus {
  --size: var(--venus-orbit-size);
}

.orbit.sun {
  --size: var(--sun-orbit-size);
}

.orbit.mars {
  --size: var(--mars-orbit-size);
}

.orbit.jupiter {
  --size: var(--jupiter-orbit-size);
}

.orbit.saturn {
  --size: var(--saturn-orbit-size);
}

.orbit.stars {
  --size: var(--stars-orbit-size);
  --orbit-sphere-color: hsla(260, 80%, 20%, .6);
  --orbit-line-color: hsl(260 50% 60%);
}

.orbit.stars .star {
  --size: 8dvmin;
  --astronomical-unit: calc(
    var(--stars-orbit-size) / 2 -
    (var(--y) * var(--y)) * 14dvmin
  );
  --star-x-delay: calc(var(--j) * -.5s);
  content: "";
  position: absolute;
  z-index: 1;
  bottom: -8%;
  left: calc(50% + var(--astronomical-unit));
  width: calc(var(--size) * cos(var(--pov)));
  height: var(--size);
  background: #fff0ea99;
  mix-blend-mode: color-dodge;
  -webkit-clip-path: polygon(
    50% 0,
    55% 45%,
    100% 50%,
    55% 55%,
    50% 100%,
    45% 55%,
    0% 50%,
    45% 45%
  );
          clip-path: polygon(
    50% 0,
    55% 45%,
    100% 50%,
    55% 55%,
    50% 100%,
    45% 55%,
    0% 50%,
    45% 45%
  );
  translate: -50% calc(-50% + var(--y) * 800%);
  rotate: x calc(var(--y) * 80deg);
  scale:
    calc(1 - var(--y) / 1.5)
    calc(1 - var(--y) / 2);
  transform-style: preserve-3d;
  -webkit-animation:
    star-rise-and-shine
      var(--day)
      var(--star-x-delay)
      infinite,
    star-move-x
      var(--day)
      var(--star-x-delay)
      infinite var(--circular-ease),
    star-move-y
      var(--day)
      calc(0s - var(--circle-delay) + var(--star-x-delay))
      infinite var(--circular-ease);
          animation:
    star-rise-and-shine
      var(--day)
      var(--star-x-delay)
      infinite,
    star-move-x
      var(--day)
      var(--star-x-delay)
      infinite var(--circular-ease),
    star-move-y
      var(--day)
      calc(0s - var(--circle-delay) + var(--star-x-delay))
      infinite var(--circular-ease);
}

@-webkit-keyframes star-rise-and-shine {
  from, 52%, to {
    opacity: 0;
  }
  60%, 93% {
    opacity: 1;
  }
  63%, 67%, 71%, 76%, 81%, 86%, 91% {
    opacity: 1;
  }
  61%, 65%, 69%, 73%, 78%, 83%, 89% {
    opacity: max(.3, sin(var(--j)));
  }
}

@keyframes star-rise-and-shine {
  from, 52%, to {
    opacity: 0;
  }
  60%, 93% {
    opacity: 1;
  }
  63%, 67%, 71%, 76%, 81%, 86%, 91% {
    opacity: 1;
  }
  61%, 65%, 69%, 73%, 78%, 83%, 89% {
    opacity: max(.3, sin(var(--j)));
  }
}

@-webkit-keyframes star-move-x {
  from, to {
    transform: rotateY(-70deg);
  }
  50% {
    transform: rotateY(70deg);
    left: calc(50% - var(--astronomical-unit));
  }
}

@keyframes star-move-x {
  from, to {
    transform: rotateY(-70deg);
  }
  50% {
    transform: rotateY(70deg);
    left: calc(50% - var(--astronomical-unit));
  }
}

@-webkit-keyframes star-move-y {
  50% {
    bottom: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
  }
}

@keyframes star-move-y {
  50% {
    bottom: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
  }
}

:nth-child(1 of :is(.body, .body-container)) { --i: 0; }
:nth-child(2 of :is(.body, .body-container)) { --i: 1; }
:nth-child(3 of :is(.body, .body-container)) { --i: 2; }
:nth-child(4 of :is(.body, .body-container)) { --i: 3; }
:nth-child(5 of :is(.body, .body-container)) { --i: 4; }
:nth-child(6 of :is(.body, .body-container)) { --i: 5; }
:nth-child(7 of :is(.body, .body-container)) { --i: 6; }
:nth-child(8 of :is(.body, .body-container)) { --i: 7; }
:nth-child(9 of :is(.body, .body-container)) { --i: 8; }
:nth-child(10 of :is(.body, .body-container)) { --i: 8; }

.body, .body-container {
  --inner-orbit: 0;
  --orbit-progress: 0;
  --sunlight-delay: calc(var(--sun-orbit-progress) * var(--day) * -1);
  --orbit-delay: calc(var(--orbit-progress) * var(--day) * -1);
  --inverse-index: calc(var(--number-of-bodies) - var(--i));
  --shine-delay: calc(
    (var(--sunlight-delay) + var(--orbit-delay)) -
    (var(--day) * var(--inner-orbit))
  );
  --anim-body-reveal: body-reveal
    1.5s
    calc(1s + .09s * var(--i))
    forwards;
  --anim-body-index: body-index
    var(--day)
    var(--orbit-delay)
    infinite;
  --anim-body-shine: body-shine
    var(--day)
    var(--shine-delay)
    linear infinite;
  --anim-body-move-x: body-move-x
    var(--day)
    var(--orbit-delay)
    infinite var(--circular-ease);
  --anim-body-move-y: body-move-y
    var(--day)
    calc(var(--orbit-delay) - var(--circle-delay))
    infinite var(--circular-ease);
  position: absolute;
  left: calc(50% + var(--astronomical-unit));
  top: 0;
  opacity: 0;
  translate: -50% calc(-50% - (50% * sin(var(--pov))));
  width: var(--size);
  height: var(--size);
  background: radial-gradient(
    circle at center,
    var(--color-1, darkgray),
    var(--color-2, #333) 60%
  );
  background-size: 300%;
  background-position: center;
  border-radius: 50%;
  -webkit-animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-shine),
    var(--anim-body-move-x),
    var(--anim-body-move-y);
          animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-shine),
    var(--anim-body-move-x),
    var(--anim-body-move-y);
}

@-webkit-keyframes body-reveal {
  to {
    top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    opacity: 1;
  }
}

@keyframes body-reveal {
  to {
    top: calc(50% + var(--astronomical-unit) * cos(var(--pov)));
    opacity: 1;
  }
}

@-webkit-keyframes body-index {
  from, 49% {
    z-index: var(--inverse-index);
  }
  50%, to {
    z-index: 0;
  }
}

@keyframes body-index {
  from, 49% {
    z-index: var(--inverse-index);
  }
  50%, to {
    z-index: 0;
  }
}

@-webkit-keyframes body-shine {
  to {
    background-position-x: -100%;
  }
}

@keyframes body-shine {
  to {
    background-position-x: -100%;
  }
}

@-webkit-keyframes body-move-x {
  50% {
    left: calc(50% - var(--astronomical-unit));
  }
}

@keyframes body-move-x {
  50% {
    left: calc(50% - var(--astronomical-unit));
  }
}

@-webkit-keyframes body-move-y {
  50% {
    top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
  }
}

@keyframes body-move-y {
  50% {
    top: calc(50% - var(--astronomical-unit) * cos(var(--pov)));
  }
}

.body-container.earth,
.body-container.moon,
.body-container.mercury,
.venus {
  --inner-orbit: 1;
}

.body-container.earth {
  --size: 4dvmin;
  --color-1: #67aecb;
  --color-2: mediumblue;
  --astronomical-unit: 0%;
  --orbit-progress: calc(1 - var(--sun-orbit-progress));
  -webkit-animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-shine),
    earth-night
      var(--day)
      var(--shine-delay)
      linear infinite;
          animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-shine),
    earth-night
      var(--day)
      var(--shine-delay)
      linear infinite;
}

@-webkit-keyframes earth-night {
  50% {
    box-shadow: inset 0 0 var(--size) calc(var(--size) / 5) #000b;
  }
}

@keyframes earth-night {
  50% {
    box-shadow: inset 0 0 var(--size) calc(var(--size) / 5) #000b;
  }
}

.body-container.earth .human-lights {
  --color: #fd08;
  --px: .7em;
  --light: 0 var(--px) var(--color);
  --this-mad-city: 0 var(--px) palevioletred;
  font-size: calc(var(--size) / 50);
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 1em;
  height: 1em;
  translate: -50% -50%;
  border-radius: 50%;
  opacity: 0;
  mix-blend-mode: difference;
  box-shadow:
    -5em -16em var(--light),
    -4em -15em var(--light),
    -3em -16em var(--light),
    -5em -14em var(--light),
    -6em -13em var(--light),
    -3em -14em var(--light),
    -2em -13em var(--light),
    -1em -18em var(--light),
    -1em -16em var(--light),
    -2em -16em var(--light),
    1em -15em var(--light),
    0em -15em var(--light),
    2em -15em var(--light),
    4em -14em var(--light),
    8em -11em var(--light),
    6em -12em var(--this-mad-city),
    8em -8em var(--light),
    7em -5em var(--light),
    4em -19em var(--light),
    8em -17em var(--light),
    1em -13em var(--light),
    8em -6em var(--light),
    4em -4em var(--light),
    17em -10em var(--light),
    19em -7em var(--light),
    -1em -4em var(--light),
    2em -4em var(--light),
    6em -1em var(--light),
    5em -3em var(--light),
    6em 1em var(--light);
  -webkit-animation:
    earth-human-lights
      var(--day)
      var(--shine-delay)
      linear infinite;
          animation:
    earth-human-lights
      var(--day)
      var(--shine-delay)
      linear infinite;
}

@-webkit-keyframes earth-human-lights {
  50% {
    opacity: 1;
  }
}

@keyframes earth-human-lights {
  50% {
    opacity: 1;
  }
}

.body-container.earth::before,
.body-container.earth::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
}

/* continent */
.body-container.earth::before {
  translate: -45% -40%;
  width: calc(var(--size) / 2);
  height: calc(var(--size) / 1.8);
  border-radius: 50% 100%;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    70% 100%,
    30% 100%,
    25% 40%,
    3% 35%,
    0 30%,
    3% 10%,
    4% 0
  );
          clip-path: polygon(
    0 0,
    100% 0,
    70% 100%,
    30% 100%,
    25% 40%,
    3% 35%,
    0 30%,
    3% 10%,
    4% 0
  );
  background: linear-gradient(
    to bottom,
    palegoldenrod 30%,
    darkgreen 60%,
    sienna
  );
  mix-blend-mode: soft-light;
  filter: blur(.1dvmin);
}

/* clouds */
.body-container.earth::after {
  width: 100%;
  height: 100%;
  translate: -50% -50%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      circle at 50% 0%,
      #fff4 3%,
      #fff4 10%,
      #0000 11%,
      #0000 40%,
      #fff4 60%,
      #0000 80%,
      #0000 100%
    ),
    repeating-radial-gradient(
      ellipse
      calc(var(--size) / 1.5)
      calc(var(--size) / 6)
      at 30% 90%,
      #fff4,
      #fffa 1%,
      transparent 3%,
      #fff9 5%,
      transparent 7%,
      #fff4 9%,
      transparent 11%,
      transparent 100%
    );
  background-size: 200% 100%;
  background-position: right center;
  filter: blur(.1dvmin);
  mix-blend-mode: hard-light;
  -webkit-animation:
    earth-clouds
      calc(var(--day) * 3.1)
      linear infinite;
          animation:
    earth-clouds
      calc(var(--day) * 3.1)
      linear infinite;
}

@-webkit-keyframes earth-clouds {
  to {
    background-position-x: -100%;
  }
}

@keyframes earth-clouds {
  to {
    background-position-x: -100%;
  }
}

.body-container.moon {
  --size: 2dvmin;
  --color-1: #eee;
  --color-2: #333;
  --astronomical-unit: calc(var(--moon-orbit-size) / 2);
  --orbit-progress: .2;
  overflow: hidden;
}

.body-container.moon .crater {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  translate: 0 -50%;
  width: calc(var(--size) * 100%);
  height: calc(var(--size) * 100%);
  background: #0003;
  transform-style: preserve-3d;
  transform-origin: left center;
  rotate: x calc(90deg - var(--pov));
  border-radius: 50%;
  box-shadow:
    .1dvmin .1dvmin .1dvmin #fff7,
    -.1dvmin -.1dvmin .1dvmin #0009;
  -webkit-animation:
    moon-crater
    var(--day)
    calc(var(--day) / -2.2)
    linear infinite;
          animation:
    moon-crater
    var(--day)
    calc(var(--day) / -2.2)
    linear infinite;
}

@-webkit-keyframes moon-crater {
  from {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * -100%)
      )
      rotateY(-90deg);
  }
  99.9% {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * 100%)
      )
      rotateY(90deg);
  }
  to {
    z-index: 0;
  }
}

@keyframes moon-crater {
  from {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * -100%)
      )
      rotateY(-90deg);
  }
  99.9% {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * 100%)
      )
      rotateY(90deg);
  }
  to {
    z-index: 0;
  }
}

.body-container.moon .crater-1 {
  --size: .3;
  --x: 30%;
  --y: 20%;
}

.body-container.moon .crater-2 {
  --size: .2;
  --x: 66%;
  --y: 55%;
}

.body-container.moon .crater-3 {
  --size: .15;
  --x: 55%;
  --y: 40%;
}

.body-container.moon .crater-4 {
  --size: .25;
  --x: 27%;
  --y: 50%;
}

.body-container.moon .crater-5 {
  --size: .1;
  --x: 60%;
  --y: 70%;
}

.body-container.moon .crater-6 {
  --size: .1;
  --x: 20%;
  --y: 40%;
}

.body-container.mercury {
  --size: 2dvmin;
  --color-1: #eed;
  --color-2: #443;
  --astronomical-unit: calc(var(--mercury-orbit-size) / 2);
  --orbit-progress: .35;
  overflow: hidden;
}

.body-container.mercury .crater {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 1;
  rotate: x calc(90deg - var(--pov));
  translate: 0 -50%;
  transform-style: preserve-3d;
  transform-origin: left center;
  width: calc(var(--size) * 100%);
  height: calc(var(--size) * 100%);
  background: #fff7;
  border-radius: 50%;
  box-shadow: inset 0 0 .1dvmin .02dvmin #0009;
  -webkit-animation:
    mercury-crater
    var(--day)
    calc(var(--day) / -2)
    linear infinite;
          animation:
    mercury-crater
    var(--day)
    calc(var(--day) / -2)
    linear infinite;
}

@-webkit-keyframes mercury-crater {
  from {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * -100%)
      )
      rotateY(-90deg);
  }
  99.9% {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * 100%)
      )
      rotateY(90deg);
  }
  to {
    z-index: 0;
  }
}

@keyframes mercury-crater {
  from {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * -100%)
      )
      rotateY(-90deg);
  }
  99.9% {
    z-index: 1;
    transform:
      translateX(
        calc(1 / var(--size) * 100%)
      )
      rotateY(90deg);
  }
  to {
    z-index: 0;
  }
}

.body-container.mercury .crater-1 {
  --size: .1;
  --x: 35%;
  --y: 21%;
}

.body-container.mercury .crater-2 {
  --size: .15;
  --x: 68%;
  --y: 35%;
}

.body-container.mercury .crater-3 {
  --size: .17;
  --x: 50%;
  --y: 42%;
}

.body-container.mercury .crater-4 {
  --size: .12;
  --x: 22%;
  --y: 75%;
}

.body-container.mercury .crater-5 {
  --size: .2;
  --x: 37%;
  --y: 53%;
}

.body-container.mercury .crater-6 {
  --size: .16;
  --x: 17%;
  --y: 79%;
}

.body-container.mercury .crater-7 {
  --size: .13;
  --x: 18%;
  --y: 23%;
}

.body-container.mercury .crater-8 {
  --size: .17;
  --x: 83%;
  --y: 38%;
}

.body-container.mercury .crater-9 {
  --size: .11;
  --x: 60%;
  --y: 18%;
}

.body-container.mercury .crater-10 {
  --size: .1;
  --x: 42%;
  --y: 70%;
}

.body-container.mercury .crater-11 {
  --size: .14;
  --x: 75%;
  --y: 65%;
}

.body-container.mercury .crater-12 {
  --size: .2;
  --x: 86%;
  --y: 60%;
}

.body-container.mercury .crater-13 {
  --size: .15;
  --x: 76%;
  --y: 73%;
}

.body-container.mercury .crater-14 {
  --size: .14;
  --x: 20%;
  --y: 50%;
}

.body-container.mercury .crater-15 {
  --size: .17;
  --x: 27%;
  --y: 22%;
}

.body-container.mercury .crater-16 {
  --size: .11;
  --x: 16%;
  --y: 73%;
}

.body.venus {
  --size: 4dvmin;
  --color-1: #eed;
  --color-2: #553;
  --astronomical-unit: calc(var(--venus-orbit-size) / 2);
  --orbit-progress: .3;
}

.body.sun {
  --size: 6dvmin;
  --color-1: #fb3;
  --color-2: yellow;
  --astronomical-unit: calc(var(--sun-orbit-size) / 2);
  --orbit-progress: var(--sun-orbit-progress);
  box-shadow:
    0 0 1dvmin .2dvmin #ffd,
    0 0 3dvmin 1dvmin #fa3;
  -webkit-animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-move-x),
    var(--anim-body-move-y);
          animation:
    var(--anim-body-reveal),
    var(--anim-body-index),
    var(--anim-body-move-x),
    var(--anim-body-move-y);
}

.body-container.mars {
  --size: 3dvmin;
  --color-1: darkorange;
  --color-2: #750;
  --astronomical-unit: calc(var(--mars-orbit-size) / 2);
  --orbit-progress: .6;
  overflow: hidden;
}

.body-container.mars .ice-cap {
  position: absolute;
  width: calc(var(--size) / 2.5);
  height: calc(var(--size) / 2.5);
  top: 0;
  left: 50%;
  translate: -50% -40%;
  rotate: x var(--pov);
  background: radial-gradient(
    circle at center,
    #fff8,
    transparent
  );
  mix-blend-mode: overlay;
  border-radius: 50%;
  -webkit-clip-path: polygon(
    0 0,
    30% 0,
    32% 40%,
    34% 0,
    60% 0,
    82% 60%,
    84% 5%,
    90% 25%,
    70% 27%,
    88% 30%,
    95% 70%,
    60% 71%,
    93% 76%,
    100% 100%,
    66% 66%,
    33% 90%,
    0 100%
  );
          clip-path: polygon(
    0 0,
    30% 0,
    32% 40%,
    34% 0,
    60% 0,
    82% 60%,
    84% 5%,
    90% 25%,
    70% 27%,
    88% 30%,
    95% 70%,
    60% 71%,
    93% 76%,
    100% 100%,
    66% 66%,
    33% 90%,
    0 100%
  );
  -webkit-animation:
    mars-ice-cap
    var(--day)
    linear infinite;
          animation:
    mars-ice-cap
    var(--day)
    linear infinite;
}

@-webkit-keyframes mars-ice-cap {
  to {
    transform: rotate(-1turn);
  }
}

@keyframes mars-ice-cap {
  to {
    transform: rotate(-1turn);
  }
}

.body-container.mars::before,
.body-container.mars::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  filter: blur(1.33dvmin);
  background: #1a1300ff;
  mix-blend-mode: hard-light;
  -webkit-animation:
    mars-surface
    var(--day)
    linear infinite;
          animation:
    mars-surface
    var(--day)
    linear infinite;
}

@-webkit-keyframes mars-surface {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(200%);
  }
}

@keyframes mars-surface {
  from {
    transform: translateX(-200%);
  }
  to {
    transform: translateX(200%);
  }
}

.body-container.mars::before {
  translate: -10% -20%;
  width: calc(var(--size) / 3.5);
  height: calc(var(--size) / 1.8);
  -webkit-clip-path: polygon(
    5% 19%,
    32% 32%,
    65% 39%,
    83% 38%,
    98% 48%,
    90% 65%,
    78% 64%,
    66% 77%,
    56% 69%,
    47% 67%,
    32% 72%,
    19% 76%,
    8% 68%,
    4% 53%,
    2% 39%
  );
          clip-path: polygon(
    5% 19%,
    32% 32%,
    65% 39%,
    83% 38%,
    98% 48%,
    90% 65%,
    78% 64%,
    66% 77%,
    56% 69%,
    47% 67%,
    32% 72%,
    19% 76%,
    8% 68%,
    4% 53%,
    2% 39%
  );
}

.body-container.mars::after {
  translate: -70% -40%;
  width: calc(var(--size) / 2.6);
  height: calc(var(--size) / 3.5);
  -webkit-clip-path: polygon(
    5% 19%,
    32% 32%,
    65% 39%,
    83% 38%,
    98% 48%,
    90% 65%,
    78% 64%,
    66% 77%,
    56% 69%,
    47% 67%,
    32% 72%,
    19% 76%,
    8% 68%,
    4% 53%,
    2% 39%
  );
          clip-path: polygon(
    5% 19%,
    32% 32%,
    65% 39%,
    83% 38%,
    98% 48%,
    90% 65%,
    78% 64%,
    66% 77%,
    56% 69%,
    47% 67%,
    32% 72%,
    19% 76%,
    8% 68%,
    4% 53%,
    2% 39%
  );
}

.body.jupiter {
  --size: 5dvmin;
  --color-1: #9f938f;
  --color-2: #321;
  --astronomical-unit: calc(var(--jupiter-orbit-size) / 2);
  --orbit-progress: .4;
  overflow: hidden;
}

.body.jupiter::after {
  --great-red-spot-width: calc(var(--size) / 8);
  --great-red-spot-height: calc(var(--size) / 10);
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(
      ellipse 140% 100% at center -5%,
      transparent 38%,
      #6526 41%,
      #6526 44%,
      transparent 45%,
      transparent 46%,
      #652a 46%,
      #652a 52%,
      transparent 53%,
      transparent 58%,
      #652a 60%,
      #652a 66%,
      transparent 67%
    );
  background-size: 200% 200%;
  background-position: center center;
  mix-blend-mode: soft-light;
}

.body.jupiter::before {
  --great-red-spot-width: calc(var(--size) / 10);
  --great-red-spot-height: calc(var(--size) / 12);
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 50%;
  box-shadow: inset 0 0 calc(var(--size) / 2) var(--color-1);
  background:
    radial-gradient(
      ellipse
      var(--great-red-spot-width)
      var(--great-red-spot-height)
      at 70% 68%,
      #5329, transparent
    ),
    radial-gradient(
      ellipse
      calc(var(--great-red-spot-width) / 2.5)
      calc(var(--great-red-spot-height) / 2.5)
      at 80% 60%,
      #fec6, transparent
    ),
    radial-gradient(
      ellipse
      calc(var(--great-red-spot-width) / 2.3)
      calc(var(--great-red-spot-height) / 2.3)
      at 45% 63%,
      #fec6, transparent
    ),
    radial-gradient(
      ellipse
      calc(var(--great-red-spot-width) / 2.1)
      calc(var(--great-red-spot-height) / 2.1)
      at 30% 36%,
      #fec6, transparent
    );
  background-size: 200% 100%;
  background-position: center center;
  mix-blend-mode: overlay;
  -webkit-animation:
    jupiter-clouds
    var(--day) calc(var(--day) / -1.2)
    linear infinite;
          animation:
    jupiter-clouds
    var(--day) calc(var(--day) / -1.2)
    linear infinite;
}

@-webkit-keyframes jupiter-clouds {
  from {
    background-position-x: left;
  }
  to {
    background-position-x: -200%;
  }
}

@keyframes jupiter-clouds {
  from {
    background-position-x: left;
  }
  to {
    background-position-x: -200%;
  }
}

.body-container.saturn {
  --size: 5dvmin;
  --color-1: #cb9;
  --color-2: #531;
  --astronomical-unit: calc(var(--saturn-orbit-size) / 2);
  --orbit-progress: .1;
  --ring-a-size: 180%;
  --ring-a-color: var(--color-1);
  --ring-b-size: 200%;
  --ring-b-color: var(--color-1);
}

.body-container.saturn .body-copy,
.body-container.saturn .storms {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
}

.body-container.saturn .storms {
  overflow: hidden;
}

.body-container.saturn .storm {
  position: absolute;
  width: var(--size);
  height: var(--size);
  top: 0;
  left: 50%;
  translate: -50% var(--y);
  rotate: x var(--pov);
  border-radius: inherit;
  mix-blend-mode: overlay;
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
          clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  background: var(--bg);
  filter: blur(var(--fuzz));
}

.body-container.saturn .storm:nth-child(1) {
  --y: -60%;
  --fuzz: .1dvmin;
  --bg: radial-gradient(
    circle at center,
    transparent 20%,
    #1323 40%,
    transparent
  );
}

.body-container.saturn .storm:nth-child(2) {
  --y: -35%;
  --fuzz: .1dvmin;
  --bg: radial-gradient(
    circle at center,
    transparent 55%,
    #3213
  );
}

.body-container.saturn .storm:nth-child(3) {
  --y: -15%;
  --fuzz: .25dvmin;
  --bg: radial-gradient(
    circle at center,
    transparent 25%,
    #fed2
  );
}

.body-container.saturn::before,
.body-container.saturn::after,
.body-container.saturn .ring-far {
  position: absolute;
  top: 50%;
  left: 50%;
  rotate: x var(--pov);
  border-radius: 50%;
}

.body-container.saturn::before,
.body-container.saturn::after {
  content: "";
  z-index: 1;
  translate: -50% -50%;
  -webkit-clip-path: polygon(
    0 100%,
    100% 100%,
    100% 50%,
    0 50%
  );
          clip-path: polygon(
    0 100%,
    100% 100%,
    100% 50%,
    0 50%
  );
}

.body-container.saturn .ring-far {
  translate: -50% -49%;
  -webkit-clip-path: polygon(
    0 0,
    100% 0,
    100% 50%,
    0 50%
  );
          clip-path: polygon(
    0 0,
    100% 0,
    100% 50%,
    0 50%
  );
}

.body-container.saturn::before,
.body-container.saturn .ring-far.a {
  width: var(--ring-a-size);
  height: var(--ring-a-size);
  background: radial-gradient(
    circle calc(var(--size) / 1.5) at center,
    #0000 99.9%,
    var(--ring-a-color)
  );
}

.body-container.saturn::after,
.body-container.saturn .ring-far.b {
  width: var(--ring-b-size);
  height: var(--ring-b-size);
  background: radial-gradient(
    circle calc(var(--size) / 1.05) at center,
    #0000 99.9%,
    var(--ring-b-color)
  );
}

.body-container.saturn .shadow {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  background: radial-gradient(
    ellipse
      calc(var(--size) / 1.4)
      calc(var(--size) / 1.4 * 3)
      at center,
    #0000 18%,
    #000 18.1%
  );
  width: 100%;
  height: 75%;
  transform-style: preserve-3d;
  transform-origin: left center;
  rotate: x var(--pov);
  translate: 0 -50%;
  border-radius: 30%;
  border-top-right-radius: 50% 90%;
  border-bottom-right-radius: 50% 90%;
  -webkit-clip-path: polygon(
    50% 0,
    100% 0,
    100% 100%,
    50% 100%
  );
          clip-path: polygon(
    50% 0,
    100% 0,
    100% 100%,
    50% 100%
  );
  -webkit-animation:
    saturn-shadow
    var(--day)
    -2s
    linear infinite;
          animation:
    saturn-shadow
    var(--day)
    -2s
    linear infinite;
}

@-webkit-keyframes saturn-shadow {
  from, 40%, to {
    opacity: 0.8;
  }
  50%, 90% {
    opacity: 0.7;
  }
  to {
    transform: rotateZ(-1turn);
  }
  7.8%, 43.5% {
    z-index: 0;
  }
  43.6% {
    z-index: 2;
  }
}

@keyframes saturn-shadow {
  from, 40%, to {
    opacity: 0.8;
  }
  50%, 90% {
    opacity: 0.7;
  }
  to {
    transform: rotateZ(-1turn);
  }
  7.8%, 43.5% {
    z-index: 0;
  }
  43.6% {
    z-index: 2;
  }
}

.body-container.nebula {
  --size: .25dvmin;
  --color-1: white;
  --color-2: white;
  --astronomical-unit: calc(var(--stars-orbit-size) / 2);
  --orbit-progress: .85;
  --part-width: calc(var(--size) * 30);
  --part-height: calc(var(--size) * 20);
  --center-size: calc(var(--size) * 40);
  --part-bg-1: #4ad8;
  --part-bg-2: #b50a;
  --part-bg-3: #ec2a;
}

.body-container.nebula .body-copy {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  width: var(--center-size);
  height: var(--center-size);
  translate: -50% -50%;
  background: inherit;
  background:
    radial-gradient(
      ellipse
        calc(var(--center-size) / 1.25)
        calc(var(--center-size) / 2)
        at center,
      transparent 20%,
      #fff3,
      transparent 60%
    );
}

.body-container.nebula .body-copy::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--size));
  height: calc(var(--size));
  -webkit-animation: nebula-stars-twinkle 3s linear infinite;
          animation: nebula-stars-twinkle 3s linear infinite;
}

@-webkit-keyframes nebula-stars-twinkle {
  from, 27%, 40%, 60%, 73%, to {
    box-shadow:
      -2dvmin -1.1dvmin 0 #fff2,
      -3.4dvmin -1dvmin 0 #fff4,
      -1.5dvmin -.5dvmin 0 #fff3,
      -1dvmin 1.3dvmin 0 #fff4,
      -4.2dvmin 1dvmin 0 #fff1,
      -1.5dvmin .5dvmin 0 #fff1,
      .6dvmin -.6dvmin 0 #fff2,
      1.9dvmin -1.4dvmin 0 #fff3,
      2.5dvmin -1dvmin 0 #fff4,
      1.5dvmin .5dvmin 0 #fff5,
      1.8dvmin 1.25dvmin 0 #fff2,
      3dvmin .9dvmin 0 #fff3;
  }
  33%, 66% {
    box-shadow:
      -2dvmin -1.1dvmin 0 #fff4,
      -3.4dvmin -1dvmin 0 #fff5,
      -1.5dvmin -.5dvmin 0 #fff4,
      -1dvmin 1.3dvmin 0 #fff2,
      -4.2dvmin 1dvmin 0 #fff2,
      -1.5dvmin .5dvmin 0 #fff4,
      .6dvmin -.6dvmin 0 #fff6,
      1.9dvmin -1.4dvmin 0 #fff4,
      2.5dvmin -1dvmin 0 #fff5,
      1.5dvmin .5dvmin 0 #fff3,
      1.8dvmin 1.25dvmin 0 #fff4,
      3dvmin .9dvmin 0 #fff7;
  }
}

@keyframes nebula-stars-twinkle {
  from, 27%, 40%, 60%, 73%, to {
    box-shadow:
      -2dvmin -1.1dvmin 0 #fff2,
      -3.4dvmin -1dvmin 0 #fff4,
      -1.5dvmin -.5dvmin 0 #fff3,
      -1dvmin 1.3dvmin 0 #fff4,
      -4.2dvmin 1dvmin 0 #fff1,
      -1.5dvmin .5dvmin 0 #fff1,
      .6dvmin -.6dvmin 0 #fff2,
      1.9dvmin -1.4dvmin 0 #fff3,
      2.5dvmin -1dvmin 0 #fff4,
      1.5dvmin .5dvmin 0 #fff5,
      1.8dvmin 1.25dvmin 0 #fff2,
      3dvmin .9dvmin 0 #fff3;
  }
  33%, 66% {
    box-shadow:
      -2dvmin -1.1dvmin 0 #fff4,
      -3.4dvmin -1dvmin 0 #fff5,
      -1.5dvmin -.5dvmin 0 #fff4,
      -1dvmin 1.3dvmin 0 #fff2,
      -4.2dvmin 1dvmin 0 #fff2,
      -1.5dvmin .5dvmin 0 #fff4,
      .6dvmin -.6dvmin 0 #fff6,
      1.9dvmin -1.4dvmin 0 #fff4,
      2.5dvmin -1dvmin 0 #fff5,
      1.5dvmin .5dvmin 0 #fff3,
      1.8dvmin 1.25dvmin 0 #fff4,
      3dvmin .9dvmin 0 #fff7;
  }
}

.body-container.nebula .part {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: calc(-50% + var(--part-distance)) -50%;
  width: var(--part-width);
  height: var(--part-height);
  border-radius: 100%;
  filter: blur(.2dvmin);
  background:
    linear-gradient(
      var(--part-side),
      var(--part-bg-1) 15%,
      var(--part-bg-2),
      transparent
    ),
    linear-gradient(
      to bottom,
      var(--part-bg-3),
      transparent 20%,
      transparent 80%,
      var(--part-bg-3)
    ),
    radial-gradient(
      circle at center,
      transparent 50%,
      var(--part-bg-3)
    );
}

.body-container.nebula .part.a {
  --part-side: to left;
  --part-distance: -20%;
}

.body-container.nebula .part.b {
  --part-side: to right;
  --part-distance: 20%;
}

.body-container.galaxy {
  --size: .5dvmin;
  --color-1: white;
  --color-2: white;
  --astronomical-unit: calc(var(--stars-orbit-size) / 2);
  --orbit-progress: .35;
  --evolution-speed: calc(var(--day) / 3);
  --arm-thickness: .6dvmin;
}

.body-container.galaxy .arms {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  -webkit-animation: galaxy-rotation 5s linear infinite;
          animation: galaxy-rotation 5s linear infinite;
}

@-webkit-keyframes galaxy-rotation {
  to {
    transform: rotate(1turn);
  }
}

@keyframes galaxy-rotation {
  to {
    transform: rotate(1turn);
  }
}

:nth-child(1 of :is(.body-container.galaxy .arm)) { --i: 0; }
:nth-child(2 of :is(.body-container.galaxy .arm)) { --i: 1; }

.body-container.galaxy .arm {
  position: absolute;
  top: 50%;
  left: 50%;
  translate:
    calc(-42% + var(--i) * -15%)
    calc(-42% + var(--i) * -15%);
  rotate: calc(var(--i) * 180deg);
}

.body-container.galaxy .arm-depth {
  width: calc(var(--size) * 15);
  height: calc(var(--size) * 15);
  position: relative;
  transform: rotate(.4turn);
  -webkit-animation:
    galaxy-evolution
    var(--evolution-speed)
    ease-in-out infinite;
          animation:
    galaxy-evolution
    var(--evolution-speed)
    ease-in-out infinite;
}

@-webkit-keyframes galaxy-evolution {
  50% {
    transform: rotate(.6turn);
  }
}

@keyframes galaxy-evolution {
  50% {
    transform: rotate(.6turn);
  }
}

.body-container.galaxy .arm-depth::before {
  --arm-color: hsl(
    calc(245 + var(--d) * 20),
    30%,
    calc(60% + var(--d) * 5%)
  );
  content: "";
  position: absolute;
  inset: 0;
  border-top: var(--arm-thickness) solid var(--arm-color);
  border-right: var(--arm-thickness) solid var(--arm-color);
  border-radius: 100%;
  filter: blur(.2dvmin);
}

.body-container.galaxy .arm-depth::after {
  content: "";
  position: absolute;
  width: calc(var(--size) / 3);
  height: calc(var(--size) / 3);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border-radius: 50%;
  box-shadow:
    .8dvmin 0 2dvmin 0 brown,
    -.8dvmin 0 2dvmin 0 brown,
    0 1.6dvmin 1dvmin 0 orange,
    0 -1.6dvmin 1dvmin 0 orange,
    2.4dvmin 0 .15dvmin 0 white,
    -2.4dvmin 0 .15dvmin 0 #fe9,
    0 3.2dvmin .15dvmin 0 white,
    0 -3.2dvmin .15dvmin 0 #aaf;
  -webkit-animation:
    galaxy-stars-dim
    var(--evolution-speed)
    ease-in-out infinite;
          animation:
    galaxy-stars-dim
    var(--evolution-speed)
    ease-in-out infinite;
}

@-webkit-keyframes galaxy-stars-dim {
  15%, 35%, 65%, 85% {
    opacity: .6;
  }
  25%, 75% {
    opacity: 0;
  }
}

@keyframes galaxy-stars-dim {
  15%, 35%, 65%, 85% {
    opacity: .6;
  }
  25%, 75% {
    opacity: 0;
  }
}

.body-container.galaxy .arm-depth .arm-depth {
  position: absolute;
  width: 61.8%;
  height: 61.8%;
  bottom: 6%;
  right: 5%;
}

Um código por pan4o

Recomendado

Um código de securearray494

Um Código da Maxi-Digital

Animações orientadas por rolagem

HTML

CSS

JS

Recomendado

Um código de securearray494

Um Código da Maxi-Digital

Animações orientadas por rolagem

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS