Солнечная система. Анимация с помощью 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 века, на которую ориентируется современное естествознание. Мы познакомимся с методами исследования реликтового излучения и определения глобальных параметров Вселенной, а также обсудим нерешенные загадки Вселенной.
Тайны космоса

Борис Шустов, Дмитрий Вибе, Алексей Семихатов

На грани безумия

Наша Солнечная система, такая близкая и родная со школьной скамьи, остается полна тайн и неведомых сюрпризов. Ученые все дальше продвигаются в исследовании ближайшего к Земле космического пространства. И чем больше и глубже познания, тем увеличивается и количество возникающих вопросов. Какие небесные тела и на каком расстоянии способны обнаружить космические приборы? А если, к примеру, тело невидимо, то как его распознать? Может ли черная дыра приблизиться и поглотить все окружающее вместе с нашей планетой? О том, какие задачи стоят сегодня перед астрономами, расскажут гости нашей программы.
Урок астрономии

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

Далее >>>

∀ x, y, z

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

Теги

Похожее