Esempio di blocco di codice di animazione CSS

364 ByBy.inc

Apri nell'Editor Pubblica il Tuo Codice

Esempio di blocco di codice di animazione CSS

Consigliato

23 March 2025

Generatore di password di SENAPI

HTML

CSS

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

body {
            background-color: #333;
            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: 50%;
            width: 100%;
            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;
        }

.codigo {
          /*  Este código é uma representação simbólica da complexidade
          cresce em função de um bug desconhecido. */
        }
        
        
        .code-block {
            animation: th_bug_weight 3s ease infinite;
            background: linear-gradient(to bottom, #000, #141414);
            color: rgba(255, 255, 255, 0.7);
            padding: 5px 10px;
            border-radius: 8px;
        }

/* Animações */
        @keyframes th_bug_weight {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
                opacity: 0.9;
            }
            100% {
                transform: scale(1);
                opacity: 0.7;
            }
        }

/* Efeitos visuais */
        .effect {
            animation: th_fragmented-code 2s ease infinite;
        }

@keyframes th_fragmented-code {
            0% {
                filter: brightness(100%);
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            }
            50% {
                filter: brightness(120%); 
                clip-path: polygon(40% 0%, 80% 25%, 80% 75%, 40% 100%, 0% 75%, 0% 25%);
            }
            100% {
                filter: brightness(100%);
                clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
            }
        }

Esempio di blocco di codice di animazione CSS

Consigliato

Portafoglio di denaro

Il codice di Mete

Generatore di password di SENAPI

HTML

CSS

JS

Consigliato

Portafoglio di denaro

Il codice di Mete

Generatore di password di SENAPI

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS