Coding the reality

Open In Editor Publish Your Code

Coding the reality

Recommended

11 May 2024

Ethereum hover card

18 February 2025

Greg the assistant

21 June 2024

Toothed Toggle

HTML

CSS

.container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background: linear-gradient(to bottom, #ff9999, #ffcc99); /* Background gradient */
    }

.world {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: #fff;
    animation: spin 3s linear infinite;
    }

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
    }

.planet {
    position: absolute;
    width: 50px;
    height: 50px;
    background: #ccc;
    border-radius: 50%;
    animation: orbit 5s ease-in-out infinite;
    }

.planet:nth-child(1) {
    animation-delay: 0s;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    }

.planet:nth-child(2) {
    top: 70px;
    left: 20px;
    }

.planet:nth-child(3) {
    top: 20px;
    left: 80px;
    }

@keyframes orbit {
    0% { transform: translate(0, 0); }
    100% { transform: translate(50px, 0);}
    }

JS