Солнечная система. Анимация с помощью CSS
<style type="text/css">
div.cosmos { background: url(/ax/d1/1/a626/Fr0r.jpg); box-sizing: border-box; perspective: 600px; overflow:hidden; }
.planets{ width: 90vw; height: 30vw; margin: 0px auto; transform: rotateX(70deg); transform-style: preserve-3d; }
.block1 { transform-style: preserve-3d; border: 1px solid gold; border-radius: 50%; position: absolute; animation: orbe infinite linear; }
.orbit_sun { top: calc(50% - 50px); left: calc(50% - 50px); animation: none; }
.orbit_mercury { width: 130px; height: 130px; top: calc(50% - 65px); left: calc(50% - 65px); animation-duration: 6s; }
.orbit_venus { width: 170px; height: 170px; top: calc(50% - 85px); left: calc(50% - 85px); animation-duration: 8s; }
.orbit_earth { width: 230px; height: 230px; top: calc(50% - 115px); left: calc(50% - 115px); animation-duration: 10s; }
.orbit_moon { width: 40px; height: 40px; top: calc(50% - 20px); left: calc(50% - 140px); }
.orbit_mars { width: 310px; height: 310px; top: calc(50% - 155px); left: calc(50% - 155px); animation-duration: 12s; }
.orbit_jupiter { width: 400px; height: 400px; top: calc(50% - 200px); left: calc(50% - 200px); animation-duration: 14s; }
.orbit_saturn { width: 550px; height: 550px; top: calc(50% - 275px); left: calc(50% - 275px); animation-duration: 16s; }
.orbit_uran { width: 650px; height: 650px; top: calc(50% - 325px); left: calc(50% - 325px); animation-duration: 18s; }
.orbit_neptun { width: 750px; height: 750px; top: calc(50% - 375px); left: calc(50% - 375px); animation-duration: 20s; }
.block2 { position: absolute; borde: 1px solid white; border-radius: 50%; transform-style: preserve-3d; animation: invert infinite linear; }
.sun { width: 100px; height: 100px; background: url(/ax/d1/1/a626/FuE8.png); background-size: cover; transform: rotateX(-80deg); animation: sun 90s infinite linear; }
.mercury { width: 15px; height: 15px; top: 60px; left: -8px; background: url(/ax/d1/1/a626/FuE4.png); animation-duration: 6s; }
.venus { width: 25px; height: 25px; top: 75px; left: -15px; background: url(/ax/d1/1/a626/FuFB.png); animation-duration: 8s; }
.earth { width: 30px; height: 30px; top: 100px; left: -20px; background: url(/ax/d1/1/a626/FuE1.png); animation-duration: 10s; }
.moon { width: 8px; height: 8px; top: 16px; left: -5px; background: url(/ax/d1/1/a626/FuE5.png); animation-name: moon; animation-duration: 10s; }
.mars { width: 25px; height: 25px; top: 142px; left: -15px; background: url(/ax/d1/1/a626/FuE3.png); animation-duration: 12s; }
.jupiter { width: 60px; height: 60px; top: 170px; left: -30px; background: url(/ax/d1/1/a626/FuE2.png); animation-duration: 14s; }
.saturn { width: 90px; height: 50px; top: 250px; left: -40px; background: url(/ax/d1/1/a626/FuE7.png); animation-duration: 16s; }
.uran { width: 20px; height: 20px; top: 315px; left: -10px; background: url(/ax/d1/1/a626/FuFA.png); animation-duration: 18s; }
.neptun { width: 20px; height: 20px; top: 365px; left: -10px; background: url(/ax/d1/1/a626/FuE6.png); animation-duration: 20s; }
.block2 { background-size: cover; }
@keyframes sun{ 0%{transform:rotateX(-80deg) rotateZ(0deg);} 100%{transform:rotateX(-80deg) rotateZ(360deg);} }
@keyframes orbe { 0% {transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);} 100% {transform: rotateX(0deg) rotateY(0deg) rotateZ(360deg);} }
@keyframes invert { 0% {transform: rotateX(90deg) rotateY(360deg) rotateZ(0deg);} 100% {transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);} }
@keyframes moon { 0% {transform: rotateX(90deg) rotateY(0deg) rotateZ(0deg);} 100% {transform: rotateX(90deg) rotateY(-360deg) rotateZ(0deg); }
</style>
<div class="cosmos">
<div class="planets">
<div class="orbit_sun block1"> <div class="sun"></div></div> <div class="orbit_mercury block1"> <div class="mercury block2"></div></div> <div class="orbit_venus block1"> <div class="venus block2"></div></div>
<div class="orbit_earth block1"> <div class="earth block2"></div>
<div class="orbit_moon block1"> <div class="moon block2"></div></div> </div>
<div class="orbit_mars block1"> <div class="mars block2"></div></div>
<div class="orbit_jupiter block1"> <div class="jupiter block2"></div></div>
<div class="orbit_saturn block1"> <div class="saturn block2"></div></div> <div class="orbit_uran block1"> <div class="uran block2"></div></div> <div class="orbit_neptun block1"> <div class="neptun block2"></div></div> </div>
</div>
Похожее
-
Олег Верходанов
О количестве галактик видимой Вселенной, квазарах и спектре мощности рассказывает Олег Верходанов — доктор физико-математических наук, ведущий научный сотрудник Специальной астрофизической обсерватории РАН, Нижний Архыз.
-

Астрофизики нашли возможное объяснение существованию реликтового холодного пятна в созвездии Эридана. В этой области Вселенной температура микроволнового излучения на 70 микрокельвинов меньше, чем в окружающем пространстве, где она равна 2,7 кельвина.
-
Алексей Паевский
Атомы, из которых мы состоим, стабильны и неизменны. Однако появились они в разное время. Их объединяет одно: все они — продукт жизнедеятельности самой Вселенной. Какие-то появились в результате Большого Взрыва, какие-то родились в недрах звёзд, а какие-то только при их гибели. По сути, мы — звёздный прах. Речь пойдет о процессах астрохимии, приведших к появлению разных атомов, которыми заполнена вселенная.
-

В Солнечной системе, вероятно, есть еще одна чрезвычайно удаленная планета размером с Нептун, совершающая один оборот вокруг Солнца за 10–20 тысяч лет. Сенсационную статью на эту тему опубликовали 20 января два уважаемых планетолога, Константин Батыгин и Майк Браун из Калифорнийского технологического института, проводившие детальный анализ орбит уже известных нам транснептуновых объектов. Они готовы предъявить скептикам результаты многомесячного компьютерного моделирования.
-
Дмитрий Горбунов
В первой половине лекции мы обсудим наблюдаемые, дающие представление о составе и истории развития Вселенной и познакомимся со Стандартной космологической моделью. Вторая половина лекции будет посвящена обсуждению разных аномалий и нестыковок при попытках дальнейшего уточнения физических параметров, с чем пришлось столкнуться в последние годы. Означает ли это, что мы подошли к следующей ступени понимания физики и космологии, или это рубеж, определяемый систематическими погрешностями используемых экспериментальных методов, пока неизвестно. Я постараюсь показать, какие математические задачи возникают в космологии.
-
Кажущаяся скорость удаления галактики от нас прямо пропорциональна расстоянию до нее.
-
Чем дольше период изменения блеска переменной звезды класса цефеид, тем больше энергии она излучает.
-

Действие происходит в Александрии (Египет), в конце эпохи Римской Империи (на рубеже IV и V веков). Христианство набирает популярность и, опираясь на низы общества, становится политической силой. В это переломное время живёт философ, математик и астроном Гипатия, имеющая большое влияние на умы правителей…
-
Дмитрий Вибе

Лектор расскажет о гипотетических угрозах из Космоса, которыми нас пугают, и постарается показать, насколько они (не)реалистичны: насколько опасна для нас солнечная активность, может ли скрываться неизвестная планета на окраинах Солнечной системы, сулит ли нам крах пересечение плоскости Галактики, ожидает ли нас близкий взрыв сверхновой и пр.
-
Борис Шустов, Дмитрий Вибе, Алексей Семихатов
На грани безумия
Наша Солнечная система, такая близкая и родная со школьной скамьи, остается полна тайн и неведомых сюрпризов. Ученые все дальше продвигаются в исследовании ближайшего к Земле космического пространства. И чем больше и глубже познания, тем увеличивается и количество возникающих вопросов. Какие небесные тела и на каком расстоянии способны обнаружить космические приборы? А если, к примеру, тело невидимо, то как его распознать? Может ли черная дыра приблизиться и поглотить все окружающее вместе с нашей планетой? О том, какие задачи стоят сегодня перед астрономами, расскажут гости нашей программы.
Далее >>>
|
|