Солнечная система была создана на CSS много раз — просто найдите в Codepen! Так зачем делать это снова?

Потому что все становится лучше и проще — и теперь мы можем создать адаптивную солнечную систему всего с помощью нескольких строк CSS.

Давайте начнем с самой простой разметки:

Мы используем упорядоченный список, потому что планеты расположены по порядку.

Далее мы отключаем стили

по умолчанию и оформляем их в виде сетки:


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

Теперь для траекторий планет мы будем использовать «стек сетки». Вместо позиции: Absolute и кучи переводов мы можем просто сложить все элементы сетки с помощью:


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

Установив переменную --d (для диаметра) для каждой планеты, используя ширину: var(--d);, мы получим:



Прохладный! Давайте добавим планеты, используя псевдоэлемент ::after:


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

Давайте попросим ChatGPT сгенерировать несколько хороших радиальных градиентов для каждой планеты — и пока мы этим занимаемся, давайте скажем, что мы создаем Солнечную систему, и запросим размеры планет от 1 до 6cqi — не полностью точен, но при этом сохраняет значительную, узнаваемую разницу:


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

И теперь у нас есть:



Чтобы анимировать планеты с разной скоростью траектории, мы добавляем:


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

Обратите внимание на путь смещения. Это ключ для упрощения анимации траектории, потому что все, что нам нужно сделать, чтобы переместить планету по форме

1. , это:
   

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

   И все! Я попросил ChatGPT посчитать тайминги на основе «Нептуна» со скоростью вращения 20 с — и получаем:

   ---

   Заключение

   С помощью всего лишь нескольких правил мы создали простую 2D-версию Солнечной системы на чистом CSS. Если вы хотите погрузиться глубже, вы можете:

   • используйте реальные расстояния и размеры (с помощью Calc())
   • добавьте преобразование: RotateX(angle) в
     , чтобы сделать его псевдо-3D:

   

   ... и, может быть, использовать Matrix3d, чтобы «сгладить» планеты?

   Удачного программирования!