Animazione di caricamento CSS Struttura HTML

845 byby.createsite

Apri nell'Editor Video Pubblica il Tuo Codice

Animazione di caricamento CSS Struttura HTML

Consigliato

22 August 2025

Carosello di carte leone 3D HTML CSS e JavaScript

5 February 2026

Flickr Spell: generatore di lettere e numeri di immagini

3 December 2024

Un codice di securecode635

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

.loading-element {
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        animation: loading-animation 1s linear infinite;
    }

@keyframes loading-animation {
        0% { transform: scale(1); }
        25% { transform: scale(1.1); }
        50% { transform: scale(0.9); }
        75% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

.elemento1 {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #fff;
        animation: elemento1-animate 2s ease-in-out;
    }

@keyframes elemento1-animate {
        0% { transform: translate(0, 0); }
        25% { transform: translate(100px, 0); }
        50% { transform: translate(-50px, 100px); }
        75% { transform: translate(100px, -50px); }
        100% { transform: translate(0, 0); }
    }

.elemento2 {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #eee;
        animation: elemento2-animate 3s ease-in-out;
    }

@keyframes elemento2-animate {
        0% { transform: translate(0, 0); }
        25% { transform: translate(150px, 0); }
        50% { transform: translate(-75px, 150px); }
        75% { transform: translate(150px, -75px); }
        100% { transform: translate(0, 0); }
    }

/* A sensação de espera, como se o tempo tivesse parado. */
    .loading-element:after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        animation: loading-animation-infinite 1s linear infinite;
        background-color: #333;
        opacity: 0.5;
    }

@keyframes loading-animation-infinite {
        0% { transform: scale(1); }
        25% { transform: scale(1.1); }
        50% { transform: scale(0.9); }
        75% { transform: scale(1.05); }
        100% { transform: scale(1); }
    }

/* Os elementos se deslocam e se reorganizam, como se estivessem sendo influenciados por alguma força externa. */
    .elemento1::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #fff;
        animation: elemento1-animate-infinite 2s ease-in-out;
    }

@keyframes elemento1-animate-infinite {
        0% { transform: translate(0, 0); }
        25% { transform: translate(100px, 0); }
        50% { transform: translate(-50px, 100px); }
        75% { transform: translate(100px, -50px); }
        100% { transform: translate(0, 0); }
    }

.elemento2::before {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #eee;
        animation: elemento2-animate-infinite 3s ease-in-out;
    }

@keyframes elemento2-animate-infinite {
        0% { transform: translate(0, 0); }
        25% { transform: translate(150px, 0); }
        50% { transform: translate(-75px, 150px); }
        75% { transform: translate(150px, -75px); }
        100% { transform: translate(0, 0); }
    }

/* A sensação de espera se mistura com a incerteza, como se alguma coisa estivesse prestes a acontecer. */
    .elemento1::before {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #ccc;
        animation: elemento1-animate-infinite-2 2s ease-in-out;
    }

@keyframes elemento1-animate-infinite-2 {
        0% { transform: translate(0, 0); }
        25% { transform: translate(100px, 0); }
        50% { transform: translate(-50px, 100px); }
        75% { transform: translate(100px, -50px); }
        100% { transform: translate(0, 0); }
    }

.elemento2::after {
        content: '';
        position: absolute;
        width: 50px;
        height: 50px;
        background-color: #fff;
        animation: elemento2-animate-infinite-2 3s ease-in-out;
    }

@keyframes elemento2-animate-infinite-2 {
        0% { transform: translate(0, 0); }
        25% { transform: translate(150px, 0); }
        50% { transform: translate(-75px, 150px); }
        75% { transform: translate(150px, -75px); }
        100% { transform: translate(0, 0); }
    }

Consigliato

Carosello di carte leone 3D HTML CSS e JavaScript

Flickr Spell: generatore di lettere e numeri di immagini

Un codice di securecode635

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS