Animation de chargement CSS : flux de mémoire et réflexion

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

23 March 2025

Animation d'ombre de texte

HTML

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <style>
    * {
        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; }

.codigo > * {
        color: #F8F8F2 !important;
    }

.annotation-container {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 16px;
        font-style: italic;
        color: #E6DB74;
        padding: 10px;
        background-color: rgba(0,0,0,0.8);
        border-radius: 20px;
        top: 10%;
        left: 50%;
        transform: translateX(-50%);
    }

/* Criação de memória distorcida */
    .loading-element {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50px;
        background-color: rgba(255,255,255,0.2);
        border-radius: 50%;
    }

/* Deslocamento horizontal gradual */
    .loading-element::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 100%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50px;
        background-color: rgba(255,255,255,0.7);
        border-radius: 50%;
        animation: loading-animation 1s linear infinite;
    }

.loading-element::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -100%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50px;
        background-color: rgba(255,255,255,0.3);
        border-radius: 50%;
        animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
        0% {
            transform: translate(-50%, -50%) scale(0);
        }
        25% {
            transform: translate(-50%, -50%) scale(1);
        }
        50% {
            transform: translate(-50%, -50%) scale(0);
        }
        100% {
            transform: translate(-50%, -50%) scale(1);
        }
    }

/* Animação de fluxo de memória */
    .memory-flow {
        position: absolute;
        top: 75%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 20%;
        height: 50%;
        background-color: rgba(255,255,255,0.5);
        border-radius: 20px;
    }

.memory-flow::before {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translate(0, 0);
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.6);
        border-radius: 20px;
        animation: memory-flow 2s linear infinite;
    }

.memory-flow::after {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translate(0, 0);
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.4);
        border-radius: 20px;
        animation: memory-flow 2s linear infinite;
    }

@keyframes memory-flow {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, 50%);
        }
        100% {
            transform: translate(0, 0);
        }
    }

/* Animação de reflexão*/
    .reflection {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 50%;
        background-color: rgba(255,255,255,0.3);
        border-radius: 20px;
        z-index: 2;
    }

.reflection::before {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translate(0, 0);
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.6);
        border-radius: 20px;
        animation: reflection 1s linear infinite;
    }

.reflection::after {
        content: "";
        position: absolute;
        top: 0%;
        left: 0%;
        transform: translate(0, 0);
        width: 100%;
        height: 100%;
        background-color: rgba(255,255,255,0.4);
        border-radius: 20px;
        animation: reflection 1s linear infinite;
    }

@keyframes reflection {
        0% {
            transform: translate(0, 0);
        }
        50% {
            transform: translate(0, 50%);
        }
        100% {
            transform: translate(0, 0);
        }
    }

.annotation-container::before {
        content: "Memória distorcida e inacessível. Tentativa fallida de recordar";
        position: absolute;
        top: -20px;
        left: 50%;
        transform: translateX(-50%);
        color: #F8F8F2;
        font-size: 14px;
        font-style: italic;
        text-align: center;
        width: 200px;
    }

</style>
</head>
<body>

<div class="animation-container">
        <div class="loading-element" style="transform: translate(-50%, -50%);"></div>
        <div class="memory-flow" style="transform: translate(-50%, -50%);">
            <div class="reflection" style="transform: translate(-50%, -50%)">
                <div class="reflection::before" style="transform: translate(0, 0); opacity: 0;"></div>
                <div class="reflection::after" style="transform: translate(-50%, -50%) scale(0);">
                    <div class="memory-flow::before" style="opacity: 1;">
                        <div class="memory-flow::after" style="transform: translate(0, 0);">
                            <div class="annotation-container" style="transform: translateX(-50%);">
                                <div class="animation-container" style="transform: translate(-50%, -50%);">
                                    Tudo o que sabemos é apenas uma recordação.
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

CSS

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
  			background: black;
            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: 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; }
        .function       { color: #A6E22E; }

.animation-container {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            aspect-ratio: 9/16;
            height: 90vh;
            overflow: hidden;
            background: transparent;
        }
        
        @keyframes loading-animation {
            0% {
                transform: scale(1) rotate(0deg);
                background-size: 200px 200px;
            }
            25% {
                transform: scale(1.2) rotate(90deg);
                background-size: 220px 220px;
            }
            50% {
                transform: scale(1) rotate(180deg);
                background-size: 240px 240px;
            }
            100% {
                transform: scale(1) rotate(360deg);
                background-size: 260px 260px;
            }
        }
        
        @keyframes branching {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .loading-element {
            position: relative;
            width: 60px;
            height: 60px;
            background-size: 200px 200px;
            border-radius: 50%;
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:before {
            content: "";
            position: absolute;
            width: 30px;
            height: 30px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .loading-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: loading-animation 1s linear infinite;
        }
        
        .branching-element {
            position: relative;
            width: 40px;
            height: 40px;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before, .branching-element:after {
            content: "";
            position: absolute;
            width: 20px;
            height: 20px;
            background-color: white;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        .branching-element:before:before, .branching-element:before:after, .branching-element:after:before, .branching-element:after:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: red;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: branching 2s linear infinite;
        }
        
        /* A cada rodada, adiciona uma camada nova. Isso simboliza o crescimento do entendimento e a multiplicação das ideias. */
        @keyframes crescimento {
            0% {
                transform: scale(1);
            }
            100% {
                transform: scale(2);
            }
        }
        
        .crescende {
            position: relative;
            width: 20px;
            height: 20px;
            background-size: 40px 40px;
            border-radius: 50%;
            animation: crescimento 3s linear infinite;
        }
        
        .crescende:before, .crescende:after {
            content: "";
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: transparent;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            animation: crescimento 3s linear infinite;
        }
        
        /* Com a cada nova ideia, sentimo uma sensação de liberdade e crescimento. */
        
        /* A cada rodada, a carga é maior, representando o aumento da sabedoria e a busca pela perfeição. */
        
        .carregamento {
            position: relative;
            width: 50%;
            height: 50%;
            background-size: 100px 100px;
            border-radius: 50%;
            animation: loading-animation 2s linear infinite;
        }
        
        .carregamento:before {
            content: "";
            position: absolute;
            width: 25%;
            height: 25%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }
        
        .carregamento:after {
            content: "";
            position: relative;
            width: 10%;
            height: 10%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: linear-gradient(to bottom right, #03A9F4, #3F87F5);
            animation: crescimento 2s linear infinite;
        }

Animation de chargement CSS : flux de mémoire et réflexion

Recommandé

Un code par constantcc607

Un code par mcdonge13

Animation d'ombre de texte

HTML

CSS

JS

Recommandé

Un code par constantcc607

Un code par mcdonge13

Animation d'ombre de texte

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS