KamCode: Solar System

Solar System

Solar System With Visuals | html css and javascript

How to create Analog Clock using Html Css and Javascrip

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar System</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="solar-system">
        <div class="sun">
            <img src="./sun.png" alt="Sun-img">
        </div>
        <div class="earth-orbit">
            <div class="earth">
                <img src="./earth.png" alt="Earth-img">
            </div>
            <div class="moon-orbit">
                <div class="moon">
                    <img src="./moon.png" alt="Moon-img">
                </div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

CSS

/* ===== Body =====  */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-image: url("/stars-bk.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

/* ===== Solar-system ===== */
.solar-system {
    position: relative;
    width: 400px;
    height: 400px;
}

/* ===== Sun ===== */
.sun {
    background: radial-gradient(circle, yellow, rgba(255, 255, 0, 0.801));
    box-shadow: 0 0 150px 100px rgba(255, 255, 1, 0.192);
    position: absolute;
    top: 50%;
    left: 50%;
}

/* ===== Sun Image ===== */
.sun img {
    width: 300px;
    height: 200px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 7s linear infinite;
}

/* ===== Earth Orbit ===== */
.earth-orbit {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbit 5s linear infinite;
}

/* ===== Earth ===== */
.earth {
    width: 50px;
    height: 50px;
}

/* ===== Earth Image ===== */
.earth img {
    width: 50px;
    height: 50px;
    transform: translate(-50%, -50%);
    animation: orbit 5s linear infinite;
}

/* ===== Moon ===== */
.moon {
    width: 30px;
    height: 30px;
}

/* ===== Moon Orbit ===== */
.moon-orbit {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: orbit 2s linear infinite;
}

/* ===== Moon Image ===== */
.moon img {
    width: 25px;
    height: 25px;
    box-shadow: 0 0 30px 30px #ffffff1a;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    
}

/* ===== Spin Animation ===== */
@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ===== Orbit Animation ===== */
@keyframes orbit {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

JAVASCRIPT

// Get references to the elements we want to animate
const sun = document.querySelector('.sun');
const earthOrbit = document.querySelector('.earth-orbit');
const earth = document.querySelector('.earth');
const moonOrbit = document.querySelector('.moon-orbit');
const moon = document.querySelector('.moon');

// Define rotation angles for the planets
let earthRotationAngle = 0;
let moonRotationAngle = 0;

// Set the animation speed
const earthRotationSpeed = 1;
const moonRotationSpeed = 5;

// Function to update the animation frame
function animate() {
    earth.style.transform = `rotate(${earthRotationAngle}deg) translate(150px)`;
    moon.style.transform = `rotate(${moonRotationAngle}deg) translate(30px)`;

    // Request the next animation frame
    requestAnimationFrame(animate);
}

// Start the animation loop
animate();

Solar System

Solar System With Visuals | html css and javascript

How to create Analog Clock using Html Css and Javascrip

KamCode | All right reserved.