Fragmento de animación de carga de CSS

497 ByBy.inc

Abrir en el editor Publica tu código

Recomendado

30 August 2024

Botón con efecto de desplazamiento de Drácula animado

18 June 2025

Un código de ByBy.inc

21 January 2025

Página de destino de la agencia inmobiliaria

HTML

CSS

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

body {
            background:url("./thumb.jpg") no-repeat center center;
            background-color: #000;
            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;
        }

/* animation */
        .loading-element {
            position: relative;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            /* criar uma sensação de realidade distorcida */
            animation: loading-animation 1s linear infinite;
        }
        @keyframes loading-animation {
            0% {
                border-radius: 50%;
                transform: scale(1) rotate(0deg);
            }
            100% {
                border-radius: 50%;
                transform: scale(1.5) rotate(360deg);
            }
        }
        /* criar uma sensação de perda de controle */
        .loading-element::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(255, 0, 0, 0.5);
            mix-blend-mode: screen;
            border-radius: 50%;
            animation: loading-animation-2 1s linear infinite;
        }
        @keyframes loading-animation-2 {
            0% {
                transform: scale(1) rotate(0deg);
            }
            100% {
                transform: scale(0.5) rotate(360deg);
            }
        }
        /* criar uma sensação de desintegração */
        .loading-element::after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 255, 0.5);
            mix-blend-mode: screen;
            border-radius: 50%;
            animation: loading-animation-3 1s linear infinite;
        }
        @keyframes loading-animation-3 {
            0% {
                transform: scale(1) rotate(0deg);
            }
            100% {
                transform: scale(0.5) rotate(360deg);
                opacity: 0;
            }
        }

Recomendado

Botón con efecto de desplazamiento de Drácula animado

Un código de ByBy.inc

Página de destino de la agencia inmobiliaria

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS