Basic Code:-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Realistic Solar System 3.0 (Image Version) - Sequential Order</title>
<style>
/* CSS Reset and Background */
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
overflow: hidden;
font-family: 'Arial', sans-serif;
color: #fff;
flex-direction: column;
}
/* --- Toggle Button Style (Centered Bottom) --- */
#toggle-button {
position: absolute;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
padding: 10px 25px;
font-size: 18px;
font-weight: bold;
color: #fff;
background-color: #007bff; /* Blue for ON */
border: none;
border-radius: 50px;
cursor: pointer;
box-shadow: 0 4px 15px rgba(0, 123, 255, 0.4);
z-index: 100;
transition: all 0.3s ease;
}
#toggle-button.paused {
background-color: #dc3545; /* Red for OFF */
box-shadow: 0 4px 15px rgba(220, 53, 69, 0.4);
}
/* Solar System Main Container */
.solar-system {
position: relative;
width: 1000px;
height: 1000px;
animation: slow-rotate 400s linear infinite;
}
/* Class to Pause/Stop All Animations */
.solar-system.paused * {
animation-play-state: paused !important;
}
@keyframes slow-rotate {
to { transform: rotate(360deg); }
}
/* Sun - Centerpiece */
.sun {
width: 100px;
height: 100px;
background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/b4/The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg/800px-The_Sun_by_the_Atmospheric_Imaging_Assembly_of_NASA%27s_Solar_Dynamics_Observatory_-_20100819.jpg') no-repeat center center;
background-size: cover;
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 0 50px #ff9900, 0 0 120px rgba(255, 153, 0, 0.6);
z-index: 10;
}
.sun::after {
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
font-weight: bold;
}
/* Orbit Path */
.orbit {
position: absolute;
top: 50%;
left: 50%;
border: 1px dashed rgba(255, 255, 255, 0.9);
border-radius: 50%;
transform: translate(-50%, -50%);
z-index: 1;
}
/* Animation: Orbit (Fast Speed) */
@keyframes orbit {
to { transform: rotate(360deg); }
}
/* Planet Orbit Holder */
.planet-container {
position: absolute;
width: 100%;
height: 100%;
animation: orbit linear infinite;
}
/* Planet */
.planet {
position: absolute;
top: 0;
left: 50%;
border-radius: 50%;
animation: rotate-self 1s linear infinite;
z-index: 5;
background-size: cover;
background-position: center;
}
/* Animation: Planet Self Rotation */
@keyframes rotate-self {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
/* Planet Label */
.planet::after {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
font-size: 11px;
white-space: nowrap;
}
/* ---------------------------------------------------- */
/* Individual Planet Settings (Sequential Order) */
/* ---------------------------------------------------- */
/* 1. Mercury */
.mercury-orbit { width: 140px; height: 140px; }
.mercury-container { animation-duration: 5s; }
.mercury { width: 20px; height: 20px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9meIsfvXhr1lCHZ0HyNdLtPwMF5IYruUfvA&s'); }
/* 2. Venus */
.venus-orbit { width: 200px; height: 200px; }
.venus-container { animation-duration: 3.5s; }
.venus { width: 30px; height: 30px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR9meIsfvXhr1lCHZ0HyNdLtPwMF5IYruUfvA&s'); }
/* 3. Earth (5s Orbit) */
.earth-orbit { width: 290px; height: 290px; }
.earth-container { animation-duration: 5s; }
.earth { width: 40px; height: 40px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/9/97/The_Earth_seen_from_Apollo_17.jpg'); box-shadow: 0 0 8px rgba(51, 102, 255, 0.8); }
/* 4. Mars */
.mars-orbit { width: 360px; height: 360px; }
.mars-container { animation-duration: 6.5s; }
.mars { width: 42px; height: 42px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/02/OSIRIS_Mars_true_color.jpg'); }
/* 5. Jupiter */
.jupiter-orbit { width: 430px; height: 430px; }
.jupiter-container { animation-duration: 7.9s; }
.jupiter { width: 50px; height: 50px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/2/2b/Jupiter_and_its_shrunken_Great_Red_Spot.jpg'); }
/* 6. Saturn */
.saturn-orbit { width: 540px; height: 540px; }
.saturn-container { animation-duration: 8.5s; }
.saturn { width: 57px; height: 57px; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR8s-oIhiXSVU5815_kT0TUSedAREUhMEEcmQ&s'); }
/* 7. Uranus */
.uranus-orbit { width: 700px; height: 700px; }
.uranus-container { animation-duration: 10s; }
.uranus { width: 65px; height: 65px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/3/3d/Uranus2.jpg'); }
/* 8. Neptune */
.neptune-orbit { width: 850px; height: 850px; }
.neptune-container { animation-duration: 9.5s; }
.neptune { width: 70px; height: 70px; background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/06/Neptune.jpg'); }
</style>
</head>
<body>
<button id="toggle-button" onclick="toggleAnimation()">Pause Animation</button>
<div class="solar-system">
<div class="sun"></div>
<div class="orbit mercury-orbit">
<div class="planet-container mercury-container">
<div class="planet mercury"></div>
</div>
</div>
<div class="orbit venus-orbit">
<div class="planet-container venus-container">
<div class="planet venus"></div>
</div>
</div>
<div class="orbit earth-orbit">
<div class="planet-container earth-container">
<div class="planet earth"></div>
</div>
</div>
<div class="orbit mars-orbit">
<div class="planet-container mars-container">
<div class="planet mars"></div>
</div>
</div>
<div class="orbit jupiter-orbit">
<div class="planet-container jupiter-container">
<div class="planet jupiter"></div>
</div>
</div>
<div class="orbit saturn-orbit">
<div class="planet-container saturn-container">
<div class="planet saturn"></div>
</div>
</div>
<div class="orbit uranus-orbit">
<div class="planet-container uranus-container">
<div class="planet uranus"></div>
</div>
</div>
<div class="orbit neptune-orbit">
<div class="planet-container neptune-container">
<div class="planet neptune"></div>
</div>
</div>
</div>
<script>
// JavaScript function to toggle animation state
function toggleAnimation() {
const solarSystem = document.querySelector('.solar-system');
const button = document.getElementById('toggle-button');
// Toggle the 'paused' class
solarSystem.classList.toggle('paused');
button.classList.toggle('paused');
// Change button text
if (solarSystem.classList.contains('paused')) {
button.textContent = 'Start Animation';
} else {
button.textContent = 'Pause Animation';
}
}
</script>
</body>
</html>