Frammento di animazione di caricamento CSS

Apri nell'Editor Pubblica il Tuo Codice

Consigliato

24 July 2025

Un codice di adonis1887

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

Frammento di animazione di caricamento CSS

Consigliato

caricamento 3D delle cuffie

Un codice di adonis1887

HTML

CSS

JS

Consigliato

caricamento 3D delle cuffie

Un codice di adonis1887

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS