Animación CSS: Movimiento de figuras burocráticas

1,354 byby.createsite

Abrir en el editor Publica tu código

Animación CSS: Movimiento de figuras burocráticas

Recomendado

15 October 2025

Código HTML JavaScript del juego de adivinanzas

11 September 2025

Plantilla de sitio web HTML de Starbucks

16 March 2026

Plantilla HTML para videojuegos: Sitio web de estilo cyberpunk

HTML

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            background-color: #24303F; 
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            overflow: hidden;
        }

.codigo {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translateX(-50%);
            background: #272822;
            color: #F8F8F2;
            font-family: 'Consolas', 'Monaco', monospace;
            font-size: 18px;
            padding: 20px;
            border-radius: 8px;
            white-space: pre-line;
            text-align: left;
            line-height: 1.6;
            max-height: 25%;
            min-width: 100%;
            width: 100%;
            overflow-y: auto;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

.selector       { color: #F92672; }
        .property       { color: #66D9EF; }
        .value-number   { color: #AE81FF; }
        .value-string   { color: #E6DB74; }
        .value-color    { color: #A6E22E; }
        .brace          { color: #F8F8F2; }
        .comment        { color: #75715E; }
        .function       { color: #A6E22E; }

.animation-container {
            position: absolute;
            top: 75%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 50%;
            overflow: hidden;
            background: transparent;
        }
        
        .bureaucracy {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #34495E;
            border-radius: 10px;
            transform-origin: center;
            animation: bureaucracy 10s linear infinite;
        }

.figure {
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: #66D9EF;
            border-radius: 50%;
            filter: blur(5px) drop-shadow(0 0 4px rgba(255, 255, 255, 0.5));
            animation: figureLoop 8s linear infinite;
        }

@keyframes bureaucracy {
            0% {
                transform: rotate(0deg); 
            } 
            50% {
                transform: rotate(180deg); 
            } 
            100% {
                transform: rotate(360deg); 
            }
        }
        
        @keyframes figureLoop {
          0% { transform: translate(0,0); }
          50% { transform: translate(50px, 0); }
          100% { transform: translate(0,0); } /* loop back */
        }

/* Animação que se repete em cada iteração da loop do 'figureLoop */
         .figure:nth-child(1) { animation-delay: 0s; }
         .figure:nth-child(2) { animation-delay: 2s; }
         .figure:nth-child(3) { animation-delay: 4s; }