Extrait d'animation de chargement CSS

496 ByBy.inc

Ouvrir dans l'éditeur Publiez votre code

Recommandé

20 September 2025

Feux d'artifice animés CSS, lucioles, tournesol

12 October 2025

Animation de chargement CSS Structure HTML

16 October 2025

Animation de code CSS : sable, erreurs et développement

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

Recommandé

Feux d'artifice animés CSS, lucioles, tournesol

Animation de chargement CSS Structure HTML

Animation de code CSS : sable, erreurs et développement

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS