Solar system using HTML, CSS, and Javascript
This code is an HTML and CSS animation that displays a solar system model consisting of the sun, earth, moon, and Mars.
HTML
<!DOCTYPE html>
<html>
<body>
<div class="container">
<div class="sun">
<div class="planet-name" data-name="Sun">Sun</div>
</div>
<div class="earth">
<div class="planet-name" data-name="Earth">Earth</div>
<div class="moon">
<div class="planet-name" data-name="Moon">Moon</div>
</div>
</div>
<div class="mars">
<div class="planet-name" data-name="Mars">Mars</div>
</div>
</div>
</body>
</html>
CSS
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em white;
}
.earth,.moon,.mars {
position: absolute;
border-style: solid;
border-color: white transparent transparent transparent;
border-width: 0.1em 0.1em 0 0;
border-radius: 50%;
}
.earth {
top: 4em;
left: 4em;
width: 32em;
height: 32em;
animation: orbit 36.5s linear infinite;
}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.7s linear infinite;
}
.mars {
top: 11em;
left: 11em;
width: 18em;
height: 18em;
animation: orbit 68.7s linear infinite;
}
.earth::before,
.moon::before,
.mars::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
.mars::before {
top: 1.5em;
right: 1.5em;
width: 2em;
height: 2em;
background-color: red;
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
}
.planet-name {
display: none;
position: absolute;
color: white;
font-size: 1.2em;
}
.sun:hover::after,
.earth:hover::after,
.moon:hover::after,
.mars:hover::after {
content: attr(data-name);
position: absolute;
color: white;
font-size: 1.2em;
top: -1.5em; /* change bottom to top and adjust the value */
left: 50%;
transform: translateX(-50%);
}
JAVASCRIPT
function createStars() {
const container = document.querySelector('.container');
for (let i = 0; i < 1000; i++) { // Increase the number of stars to 1000
const star = document.createElement('div');
star.className = 'star';
star.style.width = '1px';
star.style.height = '1px';
star.style.top = Math.random() * 100 + '%';
star.style.left = Math.random() * 100 + '%';
container.appendChild(star);
}
}
createStars();
