
Demo:
To create the CSS and JavaScript Solar System Animation follow the steps below:
- Add HTML
- Add CSS
- Add JavaScript
Step1.
Add HTML
<div class="milkyWay">
<div class="sun"></div>
<div class="planetOne">
<div id="moveMercury" class="mercury"></div>
</div>
<div class="planetTwo">
<div id="moveVenus" class="venus"></div>
</div>
<div class="planetThree">
<div id="moveEarth" class="earth"></div>
</div>
<div class="planetFour">
<div id="moveMars" class="mars"></div>
</div>
<div class="planetFive">
<div id="moveJupiter" class="jupiter"></div>
</div>
<div class="planetSix">
<div id="moveSaturn" class="saturn"></div>
</div>
<div class="planetSeven">
<div id="moveUranus" class="uranus"></div>
</div>
</div>
Step2.
Add CSS
Set the colour and the position of the background and elements:
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #1c2541;
}
.milkyWay {
position: relative;
}
Add the center of the animation:
.sun {
position: relative;
width:50px;
height: 50px;
border-radius:50%;
background-color: #ffd100;
}
.sun:before, .sun:after {
content:"";
position: absolute;
background-color: rgba(255,209,0,0.1);
border-radius:50%;
}
.sun:before {
width:70px;
height: 70px;
top:-10px;
left:-10px;
}
.sun:after {
width: 90px;
height: 90px;
top:-20px;
left:-20px;
}
Add the orbits and style planets:
.planetOne {
position: absolute;
width: 120px;
height: 120px;
border-radius:50%;
border: 1px solid #fff;
top:-35px;
left:-35px;
}
.mercury {
position: absolute;
width: 15px;
height:15px;
border-radius:50%;
background-color: #c9a227;
top:20px;
left:2px;
}
.planetTwo {
position: absolute;
width: 170px;
height: 170px;
border-radius:50%;
border: 1px solid #fff;
top:-60px;
left:-60px;
}
.venus {
position: absolute;
width: 18px;
height:18px;
border-radius:50%;
background-color: #ff9b85;
top:90px;
left:-8px;
}
.planetThree {
position: absolute;
width: 220px;
height: 220px;
border-radius:50%;
border: 1px solid #fff;
top:-85px;
left:-85px;
}
.earth {
position: absolute;
width: 22px;
height:22px;
border-radius:50%;
background-color: #0496ff;
left:100px;
top:-10px;
overflow:hidden;
}
.earth:before {
content:"";
position: absolute;
width:10px;
height:5px;
border-radius:10px;
background-color: #38b000;
box-shadow: 5px 5px #38b000, 10px 5px #38b000, -2px 10px #38b000, 15px 10px #38b000,5px 15px #38b000;
}
.planetFour {
position: absolute;
width: 270px;
height: 270px;
border-radius:50%;
border: 1px solid #fff;
top:-110px;
left:-110px;
}
.mars {
position: absolute;
width: 16px;
height:16px;
border-radius:50%;
background-color: #db3a34;
top:200px;
left:12px;
}
.planetFive {
position: absolute;
width: 330px;
height: 330px;
border-radius:50%;
border: 1px solid #fff;
top:-140px;
left:-140px;
}
.jupiter {
position: absolute;
border-radius:50%;
background-color: #ff9100;
width:28px;
height:28px;
overflow: hidden;
}
.jupiter:before {
content:"";
position: absolute;
border-radius:20px;
width:12px;
height:5px;
background-color: rgba(255,255,255,0.3);
box-shadow: 15px 10px rgba(255,255,255,0.3), 5px 15px rgba(255,255,255,0.3),5px 25px rgba(255,255,255,0.3);
}
.planetSix {
position: absolute;
width: 390px;
height: 390px;
border-radius:50%;
border: 1px solid #fff;
top:-170px;
left:-170px;
}
.saturn {
position: absolute;
width:25px;
height: 25px;
border-radius:50%;
background-color: #4281a4;
transform-style: preserve-3d;
}
.saturn:before {
content:"";
position: absolute;
border: solid 7px #9cafb7;
border-radius: 50%;
width: 35px;
height: 28px;
transform: rotate3d(1, 0, 0, 75deg);
left:-12px;
top:-8px;
}
.planetSeven {
position: absolute;
width: 450px;
height: 450px;
border-radius:50%;
border: 1px solid #fff;
top:-200px;
left:-200px;
}
.uranus {
position: absolute;
width:22px;
height: 22px;
border-radius:50%;
background-color: #004e89;
overflow: hidden;
}
.uranus:before {
content:"";
position: absolute;
background-color: #1a659e;
width:15px;
height:3px;
border-radius:10px;
box-shadow: 5px 5px #1a659e, -5px 15px #1a659e;
}
Step3.
Add JavaScript
var rotatePlanets = (function() {
function getPosition(settings, ellapsedTime) {
var angle = getAngle(settings, ellapsedTime);
return {
x: Math.round(settings.center.x + settings.radius * Math.cos(angle)),
y: Math.round(settings.center.y + settings.radius * Math.sin(angle))
};
}
function getAngle(settings, ellapsedTime) {
return ellapsedTime / settings.interval * 2 * Math.PI * settings.direction - settings.startPositionRad;
}
function start(id, settings) {
var el = document.getElementById(id),
startTime = (new Date()).getTime(),
width = el.offsetWidth,
height = el.offsetHeight;
if(el['#rot:pl'] !== null) stop(id);
el.style.position = settings.cssPosition || 'absolute';
if(!settings.startPositionRad) settings.startPositionRad = settings.startPositionDeg / 180 * Math.PI;
el['#rot:pl'] = setInterval(function() {
var pos = getPosition(settings, (new Date()).getTime() - startTime);
el.style.left = (pos.x - Math.round(width / 2)) + 'px';
el.style.top = (pos.y - Math.round(height / 2)) + 'px';
}, settings.updateInterval);
if(settings.iterations > -1) setTimeout(function() {
stop(id);
}, settings.iterations * settings.interval);
}
function stop(id) {
var el = document.getElementById(id);
if(el['#rot:pl'] === null) return;
clearInterval(el['#rot:pl']);
el['#rot:pl'] = null;
}
return {
start: start,
stop: stop
};
})();
Set the parameters to each planet separately:
rotatePlanets.start('moveMercury', {
radius: 60,
center: { x: 60, y: 60 },
interval: 8000,
direction: 1,
iterations: -1,
startPositionDeg: 175,
updateInterval: 50
});
rotatePlanets.start('moveVenus', {
radius: 85,
center: { x: 85, y: 85 },
interval: 9000,
direction: 1,
iterations: -1,
startPositionDeg: 350,
updateInterval: 50
});
rotatePlanets.start('moveEarth', {
radius: 110,
center: { x: 110, y: 110 },
interval: 10000,
direction: 1,
iterations: -1,
startPositionDeg: 125,
updateInterval: 50
});
rotatePlanets.start('moveMars', {
radius: 135,
center: { x: 135, y: 135 },
interval: 11000,
direction: 1,
iterations: -1,
startPositionDeg: 200,
updateInterval: 50
});
rotatePlanets.start('moveJupiter', {
radius: 165,
center: { x: 165, y: 165 },
interval: 14000,
direction: 1,
iterations: -1,
startPositionDeg: 305,
updateInterval: 50
});
rotatePlanets.start('moveSaturn', {
radius: 195,
center: { x: 195, y: 195 },
interval: 15000,
direction: 1,
iterations: -1,
startPositionDeg: 150,
updateInterval: 50
});
rotatePlanets.start('moveUranus', {
radius: 225,
center: { x: 225, y: 225 },
interval: 16000,
direction: 1,
iterations: -1,
startPositionDeg: 325,
updateInterval: 50
});
Enjoy coding!
Read also:
CSS Moon orbiting the Earth on the SVG path