Webleb - Extraits de Code - Animation CSS : Mouvement des figures de la bureaucratie

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

Animation CSS : Mouvement des figures de la bureaucratie

Recommandé

Un code par alejandrokundrah

Animation d'ombre de texte

Morphing des données

HTML

CSS

JS

Recommandé

Un code par alejandrokundrah

Animation d'ombre de texte

Morphing des données

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS