Солнечная система. Анимация с помощью 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 января два уважаемых планетолога, Константин Батыгин и Майк Браун из Калифорнийского технологического института, проводившие детальный анализ орбит уже известных нам транснептуновых объектов. Они готовы предъявить скептикам результаты многомесячного компьютерного моделирования.
Космология и наблюдательные данные: что «так», а что «не так», и сколько это может продолжаться

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

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

Кажущаяся скорость удаления галактики от нас прямо пропорциональна расстоянию до нее.
Зависимость «период-светимость звезд»

Чем дольше период изменения блеска переменной звезды класса цефеид, тем больше энергии она излучает.
Агора / Agora (2009)

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

Дмитрий Вибе

Лектор расскажет о гипотетических угрозах из Космоса, которыми нас пугают, и постарается показать, насколько они (не)реалистичны: насколько опасна для нас солнечная активность, может ли скрываться неизвестная планета на окраинах Солнечной системы, сулит ли нам крах пересечение плоскости Галактики, ожидает ли нас близкий взрыв сверхновой и пр.
Тайны космоса

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

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

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

Далее >>>

∀ x, y, z

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

Теги

Похожее