Солнечная система. Анимация с помощью 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>

Комментарии: 0

Похожее

Гигантские радиогалактики

Олег Верходанов

О количестве галактик видимой Вселенной, квазарах и спектре мощности рассказывает Олег Верходанов — доктор физико-математических наук, ведущий научный сотрудник Специальной астрофизической обсерватории РАН, Нижний Архыз.
Ученые обнаружили область Вселенной без звезд и галактик

Астрофизики нашли возможное объяснение существованию реликтового холодного пятна в созвездии Эридана. В этой области Вселенной температура микроволнового излучения на 70 микрокельвинов меньше, чем в окружающем пространстве, где она равна 2,7 кельвина.
«На кончике пера» открыта трансплутоновая планета размером с Нептун

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

Алексей Паевский

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

Чем дольше период изменения блеска переменной звезды класса цефеид, тем больше энергии она излучает.
Закон Хаббла

Кажущаяся скорость удаления галактики от нас прямо пропорциональна расстоянию до нее.
Космология и наблюдательные данные: что «так», а что «не так», и сколько это может продолжаться

Дмитрий Горбунов

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

Олег Верходанов

Революционные открытия последних 15 лет в области космологии сделали эту область астрофизики одной из наиболее точных наук. Существенную роль в понимании природы Вселенной сыграла радиоастрономия, история которой связана с уникальными астрофизическими экспериментами. Достаточно вспомнить открытие и исследование радиогалактик и квазаров, пульсаров, атомарных и молекулярных линий, гравитационных линз и сверхмассивных черных дыр. Однако, на мой взгляд, самыми важными событиями стали открытие реликтового излучения и обнаружение его неоднородностей. Это привело к построению картины мира начала XXI века, на которую ориентируется современное естествознание. Мы познакомимся с методами исследования реликтового излучения и определения глобальных параметров Вселенной, а также обсудим нерешенные загадки Вселенной.
Пассажиры / Passengers (2016)

Космический круизный лайнер отправляется в путешествие протяжённостью в 120 лет, чтобы основать колонию на другой планете. На корабле находятся 5000 пассажиров и 258 членов экипажа, все они пребывают в гибернации. Одна из гибернационных камер, в которой спал пассажир-механик Джим Престон, неожиданно открывается. Престон с ужасом понимает, что он единственный, кто проснулся, а до конца пути ещё 90 лет. Все попытки ввести себя обратно в гибернацию оказываются безуспешными. Смирившись с тем, что единственным его собеседником является говорящий андроид-бармен, Джим решает провести остаток своей жизни в роскоши пассажирских салонов золотого класса. Проведя целый год в одиночестве, механик решает покончить свою жизнь самоубийством, но всё меняется, когда он замечает спящую пассажирку Аврору Лэйн.
Урок астрономии

Юноша и нравящаяся ему девушка встречаются вечером у костра. Девушка задаёт вопрос о звёздном небе, и между собеседниками завязывается романтический диалог. Она спрашивает о планетах, звёздах и Вселенной, и он в образных выражениях, стихах и цитатах известных учёных (Джордано Бруно, Альберта Эйнштейна, Фрица Хоутерманса) отвечает на её вопросы, рассказывая о о загадках Космоса, загадках галактик, тайнах конечного и бесконечного. Заканчивается фильм грустным, но предопределённым переходом из романтического мира астрономии в простой и жестокий мир грубой и невесёлой обыденности.

Далее >>>

∀ x, y, z

Солнечная система. Анимация с помощью CSS

Теги

Похожее