O Sistema Solar foi feito em CSS muitas vezes - basta pesquisar no Codepen! Então, por que fazer isso de novo?

Porque as coisas ficam melhores e mais simples - e agora podemos fazer um sistema solar responsivo com apenas algumas linhas de CSS.

Vamos começar com algumas marcações bem básicas:

Usamos uma lista ordenada, porque os planetas estão em ordem.

Em seguida, desativamos os estilos

padrão e estilizamos-os como uma grade:


ol {
  all: unset;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  display: grid;
  width: 100%;
}

Agora, para as trajetórias dos planetas, vamos usar uma "pilha de grade". Em vez de position: absoluto, e um monte de traduções, podemos simplesmente empilhar todos os itens da grade com:


li {
  grid-area: 1 / -1;
  place-self: center;
}

Ao definir uma variável --d (para diâmetro) por planeta, usando largura: var(--d);, obtemos:



Legal! Vamos adicionar os planetas usando um pseudo-elemento ::after:


li::after {
  aspect-ratio: 1 / 1;
  background: var(--b);
  border-radius: 50%;
  content: '';
  display: block;
  width: var(--w, 2cqi);
}

Vamos pedir ao ChatGPT para gerar alguns gradientes radiais legais para cada planeta - e já que estamos nisso, vamos dizer que estamos criando o Sistema Solar e pedir tamanhos planetários entre 1 e 6cqi - não completamente preciso, mas ainda mantendo uma diferença considerável e reconhecível:


.mercury {
  --b: radial-gradient(circle, #c2c2c2 0%, #8a8a8a 100%);
  --w: 2.0526cqi;
}

.venus {
  --b: radial-gradient(circle, #f4d03f 0%, #c39c43 100%);
  --w: 2.6053cqi;
}

.earth {
  --b: radial-gradient(circle, #3a82f7 0%, #2f9e44 80%, #1a5e20 100%);
  --w: 3.1579cqi;
}

.mars {
  --b: radial-gradient(circle, #e57373 0%, #af4448 100%);
  --w: 3.7105cqi;
}

.jupiter {
  --b: radial-gradient(circle, #d4a373 0%, #b36d32 50%, #f4e7d3 100%);
  --w: 4.8158cqi;
}

.saturn {
  --b: radial-gradient(circle, #e6dba0 0%, #c2a13e 100%);
  --w: 5.3684cqi;
}

.uranus {
  --b: radial-gradient(circle, #7de3f4 0%, #3ba0b5 100%);
  --w: 4.2632cqi;
}

.neptune {
  --b: radial-gradient(circle, #4c6ef5 0%, #1b3b8c 100%);
  --w: 6cqi;
}

E agora temos:



Para animar os planetas com diferentes velocidades de trajetória, adicionamos:


li::after {
  /* previous styles */
  animation: rotate var(--t, 3s) linear infinite;
  offset-path: content-box;
}

Observe o caminho do deslocamento. Essa é a chave para simplificar as animações de trajetória, porque tudo o que precisamos fazer para mover o planeta ao longo da forma do

1. é o seguinte:
   

   @keyframes rotate {
     to {
       offset-distance: 100%;
     }
   }
   

   E isso é tudo! Pedi ao ChatGPT para calcular os tempos com base em "Netuno", com velocidade de rotação de 20s - e obtemos:

   ---

   Conclusão

   Com apenas algumas regras, criamos uma versão 2D simples do Sistema Solar em CSS puro. Se quiser se aprofundar, você pode:

   • use distâncias e tamanhos reais (com calc())
   • adicione uma transformação: rotateX(angle) ao
     para torná-lo pseudo-3D:

   

   ... e talvez usar Matrix3d ​​para "re-achatar" os planetas?

   Boa codificação!