Webleb - Snippet di Codice - Struttura HTML del contenitore di animazione CSS

HTML

CSS

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

body {
        background:url("./thumb.jpg") no-repeat center center;
        background-color: black;
        background-size: cover;
        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%;
        max-width: 75%;
        width: 75%;
        height: 25%;
        top:15%;
        overflow-y: hidden;
         box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .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;
    }

/**
     * O primeiro bloco, uma tela cheia de dados, é a representação da "realidade digital".
     */
    .tela-dados {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to bottom, #2c3e50, #34495e);
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
        transform: rotate(-10deg);
    }

/**
     * A segunda camada, as telas de computador, é uma referência ao excesso de informação e à perda de foco.
     */
    .tela-computador::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 300px;
        height: 200px;
        background: linear-gradient(to bottom, #f1c40f, #f2c464);
        clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
        transform: rotate(10deg);
        animation: fade-out 2s linear infinite;
    }

/**
     * A terceira camada, os fragmentos de tela, é uma representação da "sensação de confusão" ou "digital derealização".
     */
    .fragmento-tela {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: #2ecc71;
        animation: pulse 1.5s ease-in-out infinite;
    }

/**
     * A quarta camada, a linha de código, é uma representação da tentativa de encontrar um sentido no caos.
     */
    .linha-codigo {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 10px;
        background: linear-gradient(to right, #3498db, #2980b9);
        animation: scroll 1.5s ease-in-out infinite;
    }

/**
     * E a quinta camada, a luz azul, é uma representação da busca por uma conexão humana em um mundo digital.
     */
    .luz-azul {
        position: absolute;
        top: 25%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100px;
        height: 100px;
        background: #3498db;
        animation: pulsar 2s ease-in-out infinite;
    }

@keyframes fade-out {
        0% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }

@keyframes pulse {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.2);
        }
        100% {
            transform: scale(1);
        }
    }

@keyframes scroll {
        0% {
            left: 0;
        }
        100% {
            left: 100%;
        }
    }

@keyframes pulsar {
        0% {
            transform: scale(1);
        }
        50% {
            transform: scale(1.5);
        }
        100% {
            transform: scale(1);
        }
    }

.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%;
        max-width: 75%;
        width: 75%;
        height: 25%;
        top:15%;
        overflow-y: hidden;
         box-shadow: -8px 10px 18px rgba(0, 0, 0, 0.55);
    }

.selector       { color: #F92672; }
    .property       { color: #66D9EF; }
    .value-number   { color: #AE81FF; }
    .value-string   { color: #E6DB74; }
    .value-color    { color: #A6E22E; }
    .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;
    }

.loading-element {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 200px;
        height: 200px;
        background: linear-gradient(to bottom, #8e44ad, #7a288a);
        border-radius: 50%;
        animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
        0% {
            transform: rotate(0deg);
        }
        100% {
            transform: rotate(360deg);
        }
    }

Struttura HTML del contenitore di animazione CSS

Consigliato

Frammento di animazione di caricamento CSS

Un codice di nasmacadic

Animazione fotografica CSS Nostalgia Glitch

HTML

CSS

JS

Consigliato

Frammento di animazione di caricamento CSS

Un codice di nasmacadic

Animazione fotografica CSS Nostalgia Glitch

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS