CSS-Animation: Bewegung der Bürokratiefigur

834 byby.createsite

Im Editor öffnen Video Veröffentlichen Sie Ihren Code

CSS-Animation: Bewegung der Bürokratiefigur

Empfohlen

19 May 2025

Ein Kodex der kaiser.zulassungsservice.gmbh

28 January 2026

Grab der Maske

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

CSS-Animation: Bewegung der Bürokratiefigur

Empfohlen

moderne Animation

Ein Kodex der kaiser.zulassungsservice.gmbh

Grab der Maske

HTML

CSS

JS

Empfohlen

moderne Animation

Ein Kodex der kaiser.zulassungsservice.gmbh

Grab der Maske

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS