Солнечная система. Анимация с помощью 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 веков). Христианство набирает популярность и, опираясь на низы общества, становится политической силой. В это переломное время живёт философ, математик и астроном Гипатия, имеющая большое влияние на умы правителей…
Математический язык в познании и мышлении

Алексей Семихатов

Почему мы рассматриваем окружающий мир через призму математической логики? Как была открыта планета Нептун? И как Максвелл вывел свои уравнения? Об этом рассказывает Алексей Михайлович Семихатов, доктор физико-математических наук, главный научный сотрудник Физического института им. Лебедева РАН.
Пассажиры / Passengers (2016)

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

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

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

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

Иоганн Кеплер обладал чувством прекрасного. Всю свою сознательную жизнь он пытался доказать, что Солнечная система представляет собой некое мистическое произведение искусства. Сначала он пытался связать ее устройство с пятью правильными многогранниками классической древнегреческой геометрии. Во времена Кеплера было известно шесть планет, которые, как полагалось, помещались на вращающихся «хрустальных сферах». Кеплер утверждал, что эти сферы расположены таким образом, что между соседними сферами точно вписываются правильные многогранники. Увы, сравнив свою модель с наблюдаемыми орбитами планет, Кеплер вынужден был признать, что реальное поведение небесных тел не вписывается в очерченные им стройные рамки.

Далее >>>

∀ x, y, z

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

Теги

Похожее