Extrait d'animation de chargement CSS

689 byby.createsite

Ouvrir dans l'éditeur Publiez votre code

Recommandé

28 November 2024

Effet de la carte

11 March 2024

Modèle de site Web de portfolio HTML CSS

16 December 2024

Une page d'accueil aux couleurs de Léon

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é

Effet de la carte

Modèle de site Web de portfolio HTML CSS

Une page d'accueil aux couleurs de Léon

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS