JSFiddle - React, Tailwind, and code Playground
HTML
<img src="https://img-fotki.yandex.ru/get/5704/66124276.90/0_76432_f9f580e_orig.png" alt="" id="sun">
CSS
body{
background: #000;
}
img{
position:absolute;
}
#sun{
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
width:300px;
border-radius:100%;
}
JavaScript
Number.prototype.toRadian = function() {
return this * Math.PI / 180;
};
var animations = [];
handler();
function addAnimate(appendTo,el,speed,radius,angle){
angle = angle || Math.random()*360;
animations.push({
ap:appendTo,
el:el,
speed:speed,
angle:0,
radius:radius
});
}
function handler(){
animations.map(function(el){
var xCenter = $(el.ap).offset().left + $(el.ap).outerWidth()/2;
var yCenter = $(el.ap).offset().top + $(el.ap).outerHeight()/2;
var w = $(el.el).outerWidth();
var h = $(el.el).outerHeight();
var x = xCenter - w/2 + el.radius * Math.sin(el.angle.toRadian());
var y = yCenter - h/2 + el.radius * Math.cos(el.angle.toRadian());
el.angle = (el.angle + el.speed)%360;
$(el.el).css({left:x+'px',top:y+"px"});
});
requestAnimationFrame(handler);
}
//Добавляем землю к солнцу
var s = document.createElement("img");
s.src = "http://cosmos.agency/wp-content/uploads/2015/08/earth.png";
s.style.width = "40px";
document.body.appendChild(s);
addAnimate($("#sun"),s,1,120);
//Добавляем луну к земле
var l = document.createElement("img");
l.src = "https://vignette2.wikia.nocookie.net/destinypedia/images/4/47/Moon.png/revision/latest?cb=20140614204644";
l.style.width = "20px";
document.body.appendChild(l);
addAnimate(s,l,3,50);
//Добавляем марс к солнцу
var m = document.createElement("img");
m.src = "http://kazspace.kz/images/mars-1-.png";
m.style.width = "60px";
document.body.appendChild(m);
addAnimate($("#sun"),m,1.5,200);