Webleb - Snippets de Código - Animação CSS: Movimento da Figura Burocrática

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

Animação CSS: Movimento da Figura Burocrática

Recomendado

dança dom

Um código da ByBy.inc

Código HTML da animação CSS Eye Loader

HTML

CSS

JS

Recomendado

dança dom

Um código da ByBy.inc

Código HTML da animação CSS Eye Loader

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS