El Sistema Solar se ha creado en CSS muchas veces: ¡solo busca en Codepen! Entonces, ¿por qué hacerlo de nuevo?

Porque las cosas son mejores y más simples, y ahora podemos crear un sistema solar responsive con solo unas pocas líneas de CSS.

Comencemos con algunas marcas muy básicas:

Usamos una lista ordenada, porque los planetas están en orden.

A continuación, desactivamos los estilos

predeterminados y le aplicamos el estilo de cuadrícula:


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

Ahora, para las trayectorias de los planetas, vamos a utilizar una "pila de cuadrículas". En lugar de posición: absoluta y un montón de traducciones, podemos simplemente apilar todos los elementos de la cuadrícula con:


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

Al establecer una variable --d (para el diámetro) por planeta, usando ancho: var(--d);, obtenemos:



¡Fresco! Agreguemos los planetas usando un pseudoelemento ::after:


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

Pidamos a ChatGPT que genere algunos gradientes radiales agradables para cada planeta, y mientras estamos en eso, digámosle que estamos creando el Sistema Solar y solicitemos tamaños planetarios entre 1 y 6cqi, no completamente. preciso, pero aún mantiene una diferencia considerable y reconocible:


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

Y ahora tenemos:



Para animar los planetas con diferentes velocidades de trayectoria, agregamos:


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

Observe la ruta de desplazamiento. Esa es la clave para simplificar las animaciones de trayectoria, porque todo lo que tenemos que hacer para mover el planeta a lo largo de la forma de

1. es esto:
   

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

   ¡Y eso es todo! Le pedí a ChatGPT que calculara los tiempos basándose en "Neptuno", con una velocidad de rotación de 20 s, y obtuvimos:

   ---

   Conclusión

   Con solo unas pocas reglas, creamos una versión 2D simple del Sistema Solar en CSS puro. Si quieres profundizar más, puedes:

   • usar distancias y tamaños reales (con calc())
   • agregue una transformación: rotarX(ángulo) al
     para hacerlo pseudo-3D:

   

   ... ¿y tal vez usar Matrix3d ​​para "reaplanar" los planetas?

   ¡Feliz codificación!