Как передать переменную в css

Передать значение переменной JS в стиль CSS

Стиль применяется напрямую через названия переменных.

Пример:
Что бы установить background-color , я буду писать obj.style.backgroundColor

var score = 20 * 2.5; document.querySelector('#score').style.width = score + '%';

#score

Вариант 2:

Стили применяются через переменные из CSS

Пример:
Что бы установить background-color , я буду прямо писать obj.style[‘background-color’]

var score = 20 * 2.5; document.querySelector('#score').style['width'] = score + '%';

Как передать переменную в css

Функция (en-US) CSS var() используется для вставки значения кастомного свойства (также известного как «CSS-переменная») в другое свойство.

Интерактивный пример

Функцию var() нельзя использовать в именах свойств, селекторах или где-либо ещё, кроме как в качестве значений для свойств.

Синтаксис

Функции в качестве первого аргумента обязательно нужно передать имя кастомного свойства, значение которого нужно получить. Необязательный второй аргумент функции используется в качестве резервного значения. Если кастомное свойство, указанное в первом аргументе, оказалось недоступным, функция вернёт второе значение.

Примечание: синтаксис резервного значения, как и синтаксис кастомного свойств, допускает использование запятых. Например, var(—foo, red, blue) задаёт резервное значение red, blue ; таким образом всё, что находится между первой запятой и закрывающей скобкой, считается резервным значением.

Значения

Имя кастомного свойства, начинающиеся с двух дефисов. Кастомные свойства предназначены исключительно для разработчиков и пользователей; CSS никак не влияет на них.

Резервное значение кастомного свойства. Используется в случае, если кастомное свойство не определено или не может быть использовано в текущем контексте. Резервное значение может содержать любой символ, кроме некоторых спецсимволов, вроде символа новой строки, непарных закрывающих скобок (т.е. ) , ] , или > ), точку с запятой или восклицательный знак.

Примеры

Использование кастомного свойства, определенного внутри :root

:root  --main-bg-color: pink; > body  background-color: var(--main-bg-color); >

Кастомные свойства с резервным значением, когда свойство не было установлено

/* Резервное значение */ /* Стили для элементов компонента: */ .component .header  color: var( --header-color, blue ); /* header-color не существует, поэтому используется blue */ > .component .text  color: var(--text-color, black); > /* Стили для самого компонента: */ .component  --text-color: #080; >

Спецификации

Specification
CSS Custom Properties for Cascading Variables Module Level 1 # using-variables

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

env(…) (en-US) – доступные только для чтения переменные среды, контролируемые браузером
Использование CSS-переменных

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 7 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

Примеры применения переменных CSS на практике

Когда я впервые попробовал использовать переменные CSS, у меня не было полного представления об их возможностях. Правильное их использование позволяет существенно сократить время и трудозатраты на решение определённых задач в CSS. В преддверии старта нового потока курса по Frontend разработке делимся с вами описанием практического использования переменных CSS помимо их применения для создания маркеров дизайна, таких как цвета.

Если вы ещё не работали с переменными CSS, рекомендую прочитать эту статью, чтобы познакомиться с ними. Как только вы их освоите, работа станет намного проще.

В чём основная проблема?

Если вы используете переменные CSS так же, как и препроцессоры CSS (например в Sass), то вы не полностью реализуете все их преимущества. Рассмотрите следующий пример:

:root < --brand-primary: #7777e9; --brand-secondary: #c96fde; >.title

И тут нет никакой разницы с нижеприведённым примером в Sass:

$brand-primary: #7777e9; $brand-secondary: #c96fde; .title

Да, применение переменных CSS в качестве переменных цвета ни в коей мере не является ошибкой. Но это всё равно, что покупать Apple MacBook M1 для посещения интернет-сайтов, хотя с этим и так хорошо справляется ваш старый настольный ПК, собранный в 2012 году. Какой смысл покупать ультрасовременный компьютер и делать на нём то же самое, никак не используя весь спектр его возможностей? Как вы понимаете, примерно так я и думаю об использовании переменных CSS для сохранения информации о цветах.

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

Примеры и случаи практического использования

Полные формы записи свойств

В некоторых сценариях может потребоваться настройка полной версии записи свойства. Например, свойство внутреннего отступа может быть различным для разных компонентов. Вместо того чтобы заново переписывать полную форму записи этого свойства, мы можем использовать переменную CSS для изменяемого компонента, после чего она будет переопределяться вариациями классов в CSS.

.page-header < --padding-start: 2.5rem; --padding-block: 2rem; padding: var(--padding-block) 1rem var(--padding-block) var(--padding-start); >.page-header--compact

Обратите внимание, для изменения заполнения нам потребуется всего лишь изменить значение переменной CSS. Без неё нам было бы необходимо вручную вводить полную форму записи свойства внутреннего отступа padding, чтобы изменить только одно значение в нём.

.page-header < padding: 2rem 1rem 2rem 1.5rem; >.page-header--compact

Всё вышесказанное применимо и для свойства внешнего отступа margin.

Свойства CSS background

Что касается свойств CSS для работы с фоном, то и здесь переменные CSS помогают сократить объём создаваемого нами кода. И даже больше того: благодаря их применению сам код CSS легче читать.

Хранение значений URL

При работе с интерфейсом пользователя вам может потребоваться добавить какое-либо изображение в декоративных целях. В таком случае хорошим решением будет использование элементов и background-image. Если интерфейс должен быть динамическим, то значения для изображения нужно подставлять с помощью JavaScript.

Без применения переменных CSS соответствующий код HTML будет выглядеть так:

Но вместо того, чтобы напрямую изменять свойство background-image, мы можем сделать следующее.

.newsletter

Обратите внимание, что необходимо включить элемент url() без переменной CSS.

Положение фонового изображения

В приведённом выше примере фоновое изображение помещается справа. Для макетов с направлением текста справа налево (RTL) положение фона следует перевернуть.

.newsletter < --pos: 100% 50%; background-image: var(--thumb); background-size: cover; background-position: 100% 50%; >html[dir css">.newsletter < /* other styles */ background-position: var(--pos); >html[dir full-width "> .element < --angle: 90deg; background: linear-gradient(var(--angle), #4088vb, #C05858); >html[dir full-width "> А здесь показано, как можно сделать то же самое без переменных CSS.
.card
Теперь предположим, что у нас есть какой-то вариант карточки .card-2 и он должен находиться в другом положении. Необходимо написать следующий код:
.card-2
Таким образом, переписывается всё определение градиента. Можно ли сделать лучше? Определённо. Обратите внимание, что единственным настраиваемым значением для этого варианта является переменная --pos.
.card < --pos: center top; background: radial-gradient( circle 200px at var(--pos), rgba(64, 136, 203, 0.5), #f7f7f7 ); >.card-2
Свойство clip-path
Весьма полезным случаем использования переменной CSS является изменение с её помощью значений clip-path: polygon() при переходе с настольных на мобильные устройства.

На показанном выше рисунке необходимо изменить положение вершин многоугольника. С помощью переменных CSS сделать это намного проще.
.hero < --first: 4% 7%; --second: 80% 0; --thrid: 100% 95%; --fourth: 10% 100%; clip-path: polygon(var(--first), var(--second), var(--thrid), var(--fourth)); >@media (min-width: 40rem) < .hero < --second: 96% 0; --thrid: 92% 82%; >>
Если вы хотите узнать больше о свойстве CSS clip-path, здесь вы найдёте статью за авторством вашего покорного слуги.
Элемент флажка
Великолепный пример использования переменных CSS — это применение их в сочетании с функцией определения цветов hsla(). Таким образом мы можем создавать динамические компоненты, которые затем можно менять, корректируя одну или несколько переменных CSS.

Первое, что я сделал, — это определил значения hsla() для корневого элемента компонента.
.form-item
Теперь я могу использовать эти свойства в функции определения цветов hsla().
/* The circle that appears on hover */ .form-item__label:after < --primary-alpha: 0; background-color: hsla( var(--primary-h), var(--primary-s), var(--primary-l), var(--primary-alpha) ); >.form-item__label:hover:after
Код SVG, встроенный в CSS

Когда-то я работал над пользовательским интерфейсом для проекта одного клиента и столкнулся с такой ситуацией. У нас был раздел с двумя лентами (одна сверху, а вторая снизу). Мне необходимо было изменить цвет, угол поворота и размер этих лент, не создавая отдельный код CSS для каждой из них. Спасением стали переменные CSS!
Прежде всего я подготовил требуемый код SVG в Adobe Illustrator. Я разделил каждую ленту на три слоя:


светлые области;
тёмные области;
базовый слой.

Затем я экспортировал этот код SVG и поместил его в элементах так, чтобы легко можно было использовать его повторно. Обратите внимание, я также добавил ключевое слово currentColor! Это и есть то самое магическое значение, которое заставит всё работать.

Наконец, теперь нам необходимо определить размер и угол поворота в CSS.
.tape

Готово. Мы создали собственный код SVG, который можно настраивать по мере необходимости. Впечатляет, не правда ли?
Создание миксинов (примесей-шаблонов), таких, как в Sass
Об этой интересной возможности я узнал из рекомендуемого мною к просмотру выступления Ли Веру (Lea Verou). Идея состоит в том, чтобы установить исходные переменные CSS для определённого свойства, а затем переопределять их, когда это понадобится.
Здесь показан пример, как мы можем использовать эту возможность. Очень часто мне необходимо, чтобы враппер был центрирован, для чего можно добавить margin: 0 auto к соответствующему элементу враппера. В тех случаях, когда необходимо отцентрировать какой-то свой элемент, мы можем выполнить следующее:
.u-center < --mx: initial; --my: initial; margin: var(--my) var(--mx); >.featured-section
Во-первых, я создал служебный класс .u-center с заданными по умолчанию значениями для горизонтальных и вертикальных внешних отступов. Я могу добавить этот класс к элементу и затем переопределить переменные CSS. Это может оказаться очень полезным, например, если элементу нужны определённые внешние отступы только с верхней и нижней сторон.
Использование функции calc()
Функция calc() в сочетании с переменными CSS может очень пригодиться. Мы можем создать какой-то базовый размер для компонента, а затем, меняя только одну переменную, можем делать его больше или меньше.
Это может оказаться полезным в самых разных случаях применения. Давайте предположим, что нам необходимо создать несколько вариантов для аватара пользователя.

.c-avatar
Обратите внимание, я использовал функцию var(--size, 32). Если переменная --size не определена, то значение 32 будет использовано как резервное значение. Важно указать 1px, чтобы добавить px к результирующему числу.
Таким образом, мы можем создавать вариации классов, просто добавляя переменную CSS --size.
.c-avatar--medium < --size: 64; >.c-avatar--large
Псевдоэлементы
С помощью переменных CSS можно изменять свойство псевдоэлемента, поскольку оно наследуется от родительского элемента. Рассмотрите следующий пример:

В заголовке раздела содержится декоративная фиолетовая линия, которая является псевдоэлементом. Мы можем передать переменную CSS данному заголовку, и этот псевдоэлемент унаследует её.
.section-title < --dot-color: #829be9; >.section-title:before
Но, кроме того, мы также можем имитировать изменение цвета псевдоэлемента с помощью Javascript.
Встроенные стили
Другим примером полезного применения переменных CSS является использование их в качестве встроенных стилей. И тут открывается множество возможностей для настройки какого-либо компонента путём изменения одной или нескольких переменных.
Рассмотрите следующий пример.
.o-grid
У нас есть настроенный грид и заданное по умолчанию для ширины элемента грида значение 200px. В коде HTML мы можем переопределить его, переустановив значение для переменной CSS.
Ну разве это не полезно? Если вы хотите узнать больше о переменных CSS со встроенными стилями, я уже писал об этом более подробно.
Заключение
Как вы могли убедиться, существует множество примеров использования переменных CSS помимо определения цветов с их помощью. Уверен, то что я показал, это лишь самые поверхностные варианты их применения. Если вы придумали какой-то свой уникальный вариант использования — поделитесь им в комментариях!
Если фронтенд-разработка для вас давно родная стихия — можно уже задуматься о грейде до Fullstack-разработчика, настоящего универсала веб-разработки, которому будут рады в любом крупном проекте. На нашем курсе, помимо современной программы, вас ждет много практики в разных форматах от преподавателей с опытом коммерческой разработки. Приходите учиться, будет сложно, но интересно!

Узнайте, как прокачаться и в других специальностях или освоить их с нуля:

Профессия Data Scientist
Профессия Data Analyst
Курс по Data Engineering

ПРОФЕССИИ

Профессия Fullstack-разработчик на Python
Профессия Java-разработчик
Профессия QA-инженер на JAVA
Профессия Frontend-разработчик
Профессия Этичный хакер
Профессия C++ разработчик
Профессия Разработчик игр на Unity
Профессия Веб-разработчик
Профессия iOS-разработчик с нуля
Профессия Android-разработчик с нуля

КУРСЫ

Курс по Machine Learning
Курс "Machine Learning и Deep Learning"
Курс "Математика для Data Science"
Курс "Математика и Machine Learning для Data Science"
Курс "Python для веб-разработки"
Курс "Алгоритмы и структуры данных"
Курс по аналитике данных
Курс по DevOps

Изучаем переменные в CSS на практическом примере

Однажды веб серфинг привел меня к этому замечательному коду.
«Замечательность» его (то бишь кода) состоит в практическом использовании переменных в CSS, что сильно облегчает написание стилей (использование переменных также обуславливает необычную структуру CSS). И, конечно, тема импонирует весьма — планеты Солнечной системы.
Оригинальный проект написан на Pug и Sass, мы же разберем его на HTML/CSS.
Итак, поехали. 
Разметка одной планеты (в данном случае Меркурия) выглядит следующим образом (привожу собственный облегченный вариант):
  mercury
  Tilt 0.034° 
 Day 1,407 hours 
 Year 88 days 
 
 
 
 

Обертку для планеты и информации о ней — .card
Привязку обертки к конкретной планете — .mercury
Контейнер для планеты — .planet
Внутри которого находится контейнер для атмосферы — .atmosphere
Внутри которого — поверхность планеты — .surface
Контейнер для информации о планете — .info
Название соответствующей планеты — .title
Контейнер для дополнительных сведений — .form
Контейнер для единицы информации — .item
Всего у нас три единицы информации: 

В первой содержится информация о наклоне оси планеты и изображение стрелочки
Во второй — информация о продолжительности дня в часах
В третьей — о продолжительности года в днях



… и Font Awesome (для стрелочки):
Весь HTML:
  mercury
  Tilt 0.034° 
 Day 1,407 hours 
 Year 88 days 
 
 
 
  venus
  Tilt 177.3° 
 Day 5,832 hours 
 Year 224.7 days 
 
 
 
  earth
  Tilt 23.26° 
 Day 23.9 hours 
 Year 365.2 days 
 
 
 
  mars
  Tilt 25.2° 
 Day 24.6 hours 
 Year 687 days 
 
 
 
  jupiter
  Tilt 3.1° 
 Day 9.9 hours 
 Year 4,331 days 
 
 
 
  saturn
  Tilt 26.7° 
 Day 10.7 hours 
 Year 10,747 days 
 
 
 
  uranus
  Tilt 97.8° 
 Day 17.2 hours 
 Year 30,589 days 
 
 
 
  neptune
  Tilt 28.3° 
 Day 16.1 hours 
 Year 59,800 days 
 
 
 
  pluto
  Tilt 122.5° 
 Day 153.3 hours 
 Year 90,560 days 
 
 
 
  sun
  Tilt 0° 
 Day ~600 hours 
 Year 0 days 
 
 
 
 
Переходим к CSS.
Для объявления переменных в CSS используется следующий синтаксис:
:root
Подробнее о псевдоклассе :root можно почитать здесь.
Переменные для планеты объявляются следующим образом:
:root < --mercury-image: url(https://thebestcode.ru/media/solarSystem/mercury.jpg); --mercury-tilt: rotate(0.034deg); --mercury-day: 1407.6; --mercury-color: #999; >
Как видим, объявляются переменные для изображения, угла наклона, продолжительности дня и цвета планеты, соответственно.
Для вращения планет используется такая анимация:
@keyframes planetRotate < 0% < background-position: 0% center; >100% < background-position: -200% center; >> 
Применяются переменные в CSS так:
var(--имя-переменной); 
Вот как переменные используются для создания стилей планеты:
.mercury .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color); >.mercury .surface < background-image: var(--mercury-image); transform: var(--mercury-tilt) scale(1.2); animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite; >.mercury .planet::before < transform: var(--mercury-tilt) scale(1.2); border-color: var(--mercury-color); color: var(--mercury-color); >.mercury .icon
Обратите внимание, как переменная для продолжительности дня (--mercure-day) используется для определения продолжительности анимации (скорости вращения планеты).
Весь CSS:
:root < --mercury-image: url(https://thebestcode.ru/media/solarSystem/mercury.jpg); --mercury-tilt: rotate(0.034deg); --mercury-day: 1407.6; --mercury-color: #999; --venus-image: url(https://thebestcode.ru/media/solarSystem/venus.jpg); --venus-tilt: rotate(177.3deg); --venus-day: 5832.5; --venus-color: #e8cda2; --earth-image: url(https://thebestcode.ru/media/solarSystem/earth.jpg); --earth-tilt: rotate(23.26deg); --earth-day: 23.9; --earth-color: #b3caff; --mars-image: url(https://thebestcode.ru/media/solarSystem/mars.jpg); --mars-tilt: rotate(25.2deg); --mars-day: 24.6; --mars-color: #c07158; --jupiter-image: url(https://thebestcode.ru/media/solarSystem/jupiter.jpg); --jupiter-tilt: rotate(3.1deg); --jupiter-day: 9.9; --jupiter-color: #c9b5a4; --saturn-image: url(https://thebestcode.ru/media/solarSystem/saturn.jpg); --saturn-tilt: rotate(26.7deg); --saturn-day: 10.7; --saturn-color: #f0e2c4; --uranus-image: url(https://thebestcode.ru/media/solarSystem/uranus.jpg); --uranus-tilt: rotate(97.8deg); --uranus-day: 17.2; --uranus-color: #b8d8e1; --neptune-image: url(https://thebestcode.ru/media/solarSystem/neptune.jpg); --neptune-tilt: rotate(28.3deg); --neptune-day: 16.1; --neptune-color: #5e73bb; --pluto-image: url(https://thebestcode.ru/media/solarSystem/pluto.jpg); --pluto-tilt: rotate(122.5deg); --pluto-day: 153.3; --pluto-color: #c3b6aa; --sun-image: url(https://thebestcode.ru/media/solarSystem/sun.jpg); --sun-tilt: rotate(0deg); --sun-day: 600; --sun-color: #cc9f4c; >@keyframes planetRotate < 0% < background-position: 0% center; >100% < background-position: -200% center; >> body < background: #000; color: #fff; height: 100%; width: 100vw; margin: 10px 0 40px 0; display: grid; grid-template-columns: repeat(auto-fill, 190px); grid-template-rows: repeat(auto-fill, 400px); grid-gap: 40px; align-items: center; justify-items: center; justify-content: center; overflow-x: hidden; font-family: "Major Mono Display"; text-transform: lowercase; >.card < display: flex; flex-direction: column; align-items: center; position: relative; >.mercury .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mercury-color); >.mercury .surface < background-image: var(--mercury-image); transform: var(--mercury-tilt) scale(1.2); animation: planetRotate calc(var(--mercury-day)*.1s) linear infinite; >.mercury .planet::before < transform: var(--mercury-tilt) scale(1.2); border-color: var(--mercury-color); color: var(--mercury-color); >.mercury .icon < transform: var(--mercury-tilt); color: var(--mercury-color); >.venus .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--venus-color); >.venus .surface < background-image: var(--venus-image); transform: var(--venus-tilt) scale(1.2); animation: planetRotate calc(var(--venus-day)*.1s) linear infinite; >.venus .planet::before < transform: var(--venus-tilt) scale(1.2); border-color: var(--venus-color); color: var(--venus-color); >.venus .icon < transform: var(--venus-tilt); color: var(--venus-color); >.earth .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--earth-color); >.earth .surface < background-image: var(--earth-image); transform: var(--earth-tilt) scale(1.2); animation: planetRotate calc(var(--earth-day)*.1s) linear infinite; >.earth .planet::before < transform: var(--earth-tilt) scale(1.2); border-color: var(--earth-color); color: var(--earth-color); >.earth .icon < transform: var(--earth-tilt); color: var(--earth-color); >.mars .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--mars-color); >.mars .surface < background-image: var(--mars-image); transform: var(--mars-tilt) scale(1.2); animation: planetRotate calc(var(--mars-day)*.1s) linear infinite; >.mars .planet::before < transform: var(--mars-tilt) scale(1.2); border-color: var(--mars-color); color: var(--mars-color); >.mars .icon < transform: var(--mars-tilt); color: var(--mars-color); >.jupiter .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--jupiter-color); >.jupiter .surface < background-image: var(--jupiter-image); transform: var(--jupiter-tilt) scale(1.2); animation: planetRotate calc(var(--jupiter-day)*.1s) linear infinite; >.jupiter .planet::before < transform: var(--jupiter-tilt) scale(1.2); border-color: var(--jupiter-color); color: var(--jupiter-color); >.jupiter .icon < transform: var(--jupiter-tilt); color: var(--jupiter-color); >.saturn .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--saturn-color); >.saturn .surface < background-image: var(--saturn-image); transform: var(--saturn-tilt) scale(1.2); animation: planetRotate calc(var(--saturn-day)*.1s) linear infinite; >.saturn .planet::before < transform: var(--saturn-tilt) scale(1.2); border-color: var(--saturn-color); color: var(--saturn-color); >.saturn .icon < transform: var(--saturn-tilt); color: var(--saturn-color); >.uranus .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--uranus-color); >.uranus .surface < background-image: var(--uranus-image); transform: var(--uranus-tilt) scale(1.2); animation: planetRotate calc(var(--uranus-day)*.1s) linear infinite; >.uranus .planet::before < transform: var(--uranus-tilt) scale(1.2); border-color: var(--uranus-color); color: var(--uranus-color); >.uranus .icon < transform: var(--uranus-tilt); color: var(--uranus-color); >.neptune .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--neptune-color); >.neptune .surface < background-image: var(--neptune-image); transform: var(--neptune-tilt) scale(1.2); animation: planetRotate calc(var(--neptune-day)*.1s) linear infinite; >.neptune .planet::before < transform: var(--neptune-tilt) scale(1.2); border-color: var(--neptune-color); color: var(--neptune-color); >.neptune .icon < transform: var(--neptune-tilt); color: var(--neptune-color); >.pluto .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--pluto-color); >.pluto .surface < background-image: var(--pluto-image); transform: var(--pluto-tilt) scale(1.2); animation: planetRotate calc(var(--pluto-day)*.1s) linear infinite; >.pluto .planet::before < transform: var(--pluto-tilt) scale(1.2); border-color: var(--pluto-color); color: var(--pluto-color); >.pluto .icon < transform: var(--pluto-tilt); color: var(--pluto-color); >.sun .atmosphere < box-shadow: inset 10px 0px 12px -2px rgba(255, 255, 255, 0.2), inset -70px 0px 50px 0px black, -5px 0px 10px -4px var(--sun-color); >.sun .surface < background-image: var(--sun-image); transform: var(--sun-tilt) scale(1.2); animation: planetRotate calc(var(--sun-day)*.1s) linear infinite; >.sun .planet::before < transform: var(--sun-tilt) scale(1.2); border-color: var(--sun-color); color: var(--sun-color); >.sun .icon < transform: var(--sun-tilt); color: var(--sun-color); >.planet::before < content: ''; position: absolute; height: 190px; z-index: -2; left: 50%; top: 0%; border-left: 1px dashed rgba(255, 255, 255, 0.25); >.atmosphere < height: 190px; width: 190px; position: relative; background: radial-gradient(circle at 30% 50%, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 65%); border-radius: 100px; overflow: hidden; >.surface < position: absolute; height: 100%; width: 100%; z-index: -1; background-size: cover; >.sun .atmosphere < box-shadow: 0px 0px 10px 0px var(--sun-color), 0px 0px 1000px -2px var(--sun-color); >.info < width: 100%; >.title < text-align: center; font-size: 28px; >.form < display: flex; flex-direction: column; justify-content: space-between; >.item < display: flex; align-items: flex-end; margin-bottom: 5px; font-size: 14px; >.item .icon < margin: 0 5px; >.label < font-size: 11px; >.line
Мой вариант можно посмотреть здесь.
А вот еще одна Солнечная система (лучшее из того, что я видел).


Похожие публикации:

Как включить таймер на духовке gorenje
Как открыть бизнес класс в яндекс драйв
Как создать файл с расширением sql
Как сохранить картинку из whatsapp android