Estructura HTML de la animación de carga CSS

158 ByBy.inc

Abrir en el editor Publica tu código

Estructura HTML de la animación de carga CSS

Recomendado

27 November 2024

Sitio web de portafolio completo

6 November 2024

Efecto de texto 3D

21 July 2025

Cuadro de registro de inicio de sesión 3D Diseño HTML 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;
    }

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

Recomendado

Sitio web de portafolio completo

Efecto de texto 3D

Cuadro de registro de inicio de sesión 3D Diseño HTML CSS

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS