Codificando a realidade

320 ByBy.inc

Abrir no Editor Publique Seu Código

Recomendado

13 June 2025

Um Código por ashimadison8

19 March 2025

Página de destino de loja de informática

20 June 2025

Modelo de painel de administração HTML

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);}
    }

Recomendado

Um Código por ashimadison8

Página de destino de loja de informática

Modelo de painel de administração HTML

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS