В этой статье мы продолжим разбираться в принципах создания анимированной Солнечной системы на CSS3. Мы рассмотрим использование keyframe-анимации для движения планет по орбитам вокруг Солнца и реализуем динамические тени на планетах.
Вот на чем мы остановились в первой части: мы создали HTML-файл с единственным элементом и написали CSS-код для добавления звёздного фона и симуляции солнечного света:
See the Pen CSS 3 Solar System, Step 2 by Independent Software (@independent-software) on CodePen.
1 2 3 4 5 6 7 8 9 | <html> <head> <link rel="stylesheet" href="solar.css"/> </head> <body> <div id="universe"> </div> </body> </html> |
Добавляем Солнце
Прежде чем мы добавим в нашу вселенную какие-либо элементы, мы должны ввести подходящую систему координат. <div> нашей вселенной был прикреплён к элементу <body> через абсолютное позиционирование, но мы хотим, чтобы внутри вселенной позиционирование было относительным. Для этого добавим новый <div> с относительным позиционированием:
1 2 3 4 | <div id="universe"> <div id="galaxy"> </div> </div> |
Вот необходимый CSS-код:
1 2 3 4 5 | #galaxy { position: relative; width: 100%; height: 100%; } |
Все позиции в элементе galaxy теперь будут рассчитываться относительно него. Хотя все текущие элементы и одного размера, но если бы мы добавили хэдеры или футеры вне элемента galaxy, вёрстка бы сбилась.
Давайте добавим элемент <div> для Солнца в центр галактики. Солнце должно быть круглым, поэтому мы превратим прямоугольный <div> в круглый. Это можно сделать, установив border-radius в 50%, что превратит любой квадрат в круг. Зададим размер 30×30 пикселей, и используем отступы для размещения строго по центру экрана. Мы также раскрасим Солнце и добавим приятную жёлтую тень блока для сияния.
1 2 3 4 5 6 7 8 9 10 11 12 13 | #sun { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin-top: -15px; margin-left: -15px; border-radius: 50%; background-color: #FB7209; box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); z-index: 1; } |
Какое-то маленькое солнце, давайте увеличим длину и ширину. Но работать в пикселях — плохая идея, ведь размеры экранов отличаются. Вместо этого будем задавать размеры в em’ах: они соотносятся со стандартным размером текста в браузере, и с масштабированием проблем не возникнет. Что ещё более важно, все абсолютные величины (размеры, отступы, границы и т.п.) можно задавать в em’ах, и поэтому все их можно масштабировать одновременно, используя font-size. Если у нас есть это:
1 2 3 4 5 6 7 | #sun { width: 1em; height: 1em; margin-top: -.5em; margin-left: -.5em; ... } |
… и мы добавим это:
1 2 3 | #sun { font-size: 24em; } |
… то все размеры #sun, выраженные в em’ах, умножатся на 24. Кроме того, увеличатся и отступы, то есть Солнце останется в центре экрана!
Одноцветное солнце выглядит не очень, поэтому мы добавим прозрачное PNG-изображение с текстурой:
Для помещения изображения поверх солнца снова воспользуемся правилом background-size:
1 2 3 4 5 6 | #sun { ... background-repeat: no-repeat; background-size: cover; background-image: url(data:image/png;base64,iVBORw0KG...AAASUVORK5CYII=); } |
Вот результат:
See the Pen CSS 3 Solar System, Step 3 by Independent Software (@independent-software) on CodePen.
Добавляем планету на орбите, используя кейфреймы
Сейчас мы рассмотрим ещё одну фичу CSS3 — keyframe-анимацию, или кейфреймы. Они используются для плавного изменения CSS-свойств с течением времени. Например, если вы хотите, чтобы элемент класса myelement постепенно исчезал, вам стоит написать такой код:
1 2 3 4 5 6 7 8 9 | .myelement { animation: 'fader' 2s linear; } @keyframes fader { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } |
Сперва утверждение @keyframes используется для создания анимации с уникальным именем fader. Внутри блока keyframes мы создаём три кейфрейма: полная непрозрачность (на 0%, в начале анимации), полная прозрачность (на 50%, в середине анимации) и полная непрозрачность в конце. Непрозрачность — лишь одно из свойств, которые можно анимировать; в дальнейшем мы будем анимировать местоположение и вращение.
Для использования анимации достаточно добавить к определению класса правило animation. Вы задаёте имя анимации, её длительность и временную функцию. мы использовали linear, но можно использовать ease, ease-in или ease-out для ускорения анимации на различных этапах. Подробнее об этом можно почитать здесь.
Также ничего не мешает разделить все свойства анимации. Поскольку планет будет много, имеет смысл написать следующее:
1 2 3 4 5 6 | .myelement { animation-name: orbit; animiation-duration: 2s; animation-timing-function: linear; animation-iteration-count: infinite; } |
Мы используем animation-iteration-count для создания бесконечного анимационного цикла. Ключевое слово infinite можно добавить и к сокращённому виду записи.
Помните, что в общем случае нужно добавлять и варианты с префиксами: -webkit-animation, -moz-animation и -o-animation — но поскольку мы используем PrefixTree, это нам не нужно.
Поскольку все планеты нашей системы вращаются вокруг Солнца одинаково (меняется лишь диаметр орбиты), мы можем создать общий класс для планеты. Какие-то свойства совпадают и с Солнцем, поэтому упростим:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | #sun, .planet { position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; border-radius: 50%; } #sun { background-color: #FB7209; background-repeat: no-repeat; background-size: cover; box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); } .planet { background-color: #202020; background-repeat: no-repeat; background-size: cover; } |
Добавим планету в наш HTML:
1 2 3 4 | <div id="sun"> </div> <div id="mercury" class="planet"> </div> |
Эта работает, но планета сейчас расположена поверх Солнца, в центре. Прежде чем запустить её движение, нам нужно задать орбиту, поэтому изменим HTML так:
1 2 3 4 5 | <div id="sun"> </div> <div id="mercury" class="orbit"> <div class="planet"></div> </div> |
Теперь у нас есть связка орбита-планета, одинаковая для всех планет. Дадим нашей планете идентификатор #mercury, чтобы мы могли добавить её уникальные свойства. Сперва нарисуем орбиту: дадим ей тонкую, полупрозрачную границу и сделаем её круглой. Для орбиты Меркурия зададим размер 12em.
1 2 3 4 5 6 7 8 9 10 11 12 13 | .orbit { position: absolute; top: 50%; left: 50%; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; } #mercury.orbit { width: 12em; height: 12em; margin-top: -6em; margin-left: -6em; } |
Орбита нарисована, но Меркурий всё ещё сидит поверх Солнца. Исправим это, задав планете отступ относительно орбиты:
1 2 3 4 | #mercury .planet { left: 0%; top: 50%; } |
Это поместит Меркурий слева от Солнца, на линию орбиты.
See the Pen CSS 3 Solar System, Step 4 by Independent Software (@independent-software) on CodePen.
Настало время запустить вращение планеты! Провернём такой трюк: будем вращать не планету, а орбиту. Поскольку планета находится в системе координат орбиты, она будет вращаться вместе с орбитой. Создадим кейфреймы для орбит с использованием преобразований. Это новая функция CSS3: вы можете не только анимировать значения свойств, но и преобразовывать элементы, отражая, масштабируя или вращая их. В нашем случае мы зададим вращение относительно оси Z от 0 до 360 градусов.
1 2 3 4 | @keyframes orbit { 0% { transform: rotateZ(0deg); } 100% { transform: rotateZ(-360deg); } } |
Задав анимацию, мы можем применить её к классу орбит:
1 2 3 4 5 6 | .orbit { ... animation-name: orbit; animation-iteration-count: infinite; animation-timing-function: linear; } |
Определим длительность анимации для Меркурия:
1 2 3 | #mercury.orbit { animation-duration: 3s; } |
Вот и всё. Меркурий плавно вращается вокруг Солнца, и мы всё ещё не воспользовались JavaScript. Чистый CSS:
See the Pen CSS 3 Solar System, Step 5 by Independent Software (@independent-software) on CodePen.
Добавляем движущуюся тень на планете, используя анимации и тени блока
Наша Солнечная система будет куда реалистичней, если мы затемним ту часть планеты, которая в текущий момент времени не освещается Солнцем. Это можно реализовать с использованием кейфреймов.
Наша планета вращается вокруг солнца благодаря анимации, применённой к орбите, поэтому мы можем добавим анимацию и к самой планете:
1 2 3 4 5 6 7 8 9 10 | .planet { ... animation-iteration-count: infinite; animation-timing-function: linear; } #mercury .planet { animation-name: shadow-mercury; animation-duration: 3s; } |
Мы указали, что анимация планет будет зациклена, а у Меркурия она будет называться shadow-mercury. Определим её:
1 2 3 4 5 6 7 8 | @keyframes shadow-mercury { 0% { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); /* top */ } 25% { box-shadow: inset 16px 0 8px rgba(0, 0, 0, 0.5); /* left */ } 50% { box-shadow: inset 40px -20px 16px rgba(0, 0, 0, 0.5); /* bottom */ } 50.01% { box-shadow: inset -40px -20px 16px rgba(0, 0, 0, 0.5); /* bottom */ } 75% { box-shadow: inset -16px 0 8px rgba(0, 0, 0, 0.5); /* right */ } 100% { box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5); /* top */ } } |
Внутренние тени используются для отбрасывания теней на планету. Поскольку планеты круглые, тени должны быть такими же. В начале анимации планета находится за Солнцем и полностью освещена. На 50% она полностью в тени. Когда планета проходит перед Солнцем, мы должны переключить анимацию, что мы и делаем на 50.01%. Также заметьте, что на 100% тень должна быть в точности такой же, как и на 0%, для корректного вычисления затенения.
Здесь мы намеренно сделали тень более заметной, чем в оригинальной демке:
See the Pen CSS 3 Solar System, Step 6 by Independent Software (@independent-software) on CodePen.
Используя имеющийся код, можно легко добавить все недостающие планеты. Однако, нам нужно повернуть всю систему для получения трёхмерного вида. Тени станут гораздо более реалистичными.
Перевод статьи «Making of the CSS 3 solar system animation»