Un code par pan4o

886 pan4o

Ouvrir dans l'éditeur Publiez votre code

Recommandé

24 May 2024

Animation de défilement de parallaxe

26 January 2025

Un code par alqsdeus

30 January 2025

CodePen Home Dessine un cœur ❤️✍️

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%;
}

Recommandé

Animation de défilement de parallaxe

Un code par alqsdeus

CodePen Home Dessine un cœur ❤️✍️

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS