Comment utiliser du CSS pur pour implémenter un chargeur de lancement de boîtes (code source ci-joint)-tutoriel CSS-php.cn

Comment utiliser du CSS pur pour implémenter un chargeur de lancement de boîtes (code source ci-joint)

不言

Libérer： 2018-09-03 17:52:09

original

1587 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser du CSS pur pour implémenter un chargeur de lancement de boîtes (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Aperçu de l'effet

Comment utiliser du CSS pur pour implémenter un chargeur de lancement de boîtes (code source ci-joint)

Téléchargement du code source

https://github.com/comehope/front-end-daily-challenges

Interprétation du code

Définir dom, 1 seul élément :

<div></div>

Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: teal;
}

Copier après la connexion

Dessiner une bande de bois :

.loader {
    width: 6em;
    border-bottom: 0.25em solid white;
    font-size: 30px;
    border-radius: 0.125em;
}

Copier après la connexion

Dessinez une boîte dessus à l'aide de pseudo-éléments :

.loader {
    position: relative;
}

.loader::before {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    border: 0.25em solid white;
    bottom: 0;
    left: 0.5em;
    border-radius: 0.25em;
}

Copier après la connexion

Laissez le motif s'incliner pour créer l'effet d'une boîte sur une pente :

.loader {
    transform: rotate(-45deg);
    left: 1em;
    top: 1em;
}

Copier après la connexion

Suivant Faites des animations.

Laisser la box monter pas à pas, monter jusqu'au sommet de la pente puis remonter :

.loader::before {
    animation: push 3s infinite;
}

@keyframes push {
    0% {
        transform: translateX(0);
    }
    
    20%, 25% {
        transform: translateX(1em);
    }

    40%, 45% {
        transform: translateX(2em);
    }

    60%, 65% {
        transform: translateX(3em);
    }

    80% {
        transform: translateX(0);
    }
}

Copier après la connexion

Augmenter l'effet de roulement de la box lors de la montée :

@keyframes push {
    0% {
        transform: translateX(0) rotate(0deg);
    }
    
    20%, 25% {
        transform: translateX(1em) rotate(calc(90deg * 1));
    }

    40%, 45% {
        transform: translateX(2em) rotate(calc(90deg * 2));
    }

    60%, 65% {
        transform: translateX(3em) rotate(calc(90deg * 3));
    }

    80% {
        transform: translateX(0) rotate(0deg);
    }
}

Copier après la connexion

Augmenter l'effet anthropomorphique de la boîte lors de l'escalade :

@keyframes push {
    0% {
        transform: translateX(0) rotate(0deg);
    }

    5% {
        transform: translateX(0) rotate(-5deg);
    }
    
    20%, 25% {
        transform: translateX(1em) rotate(calc(90deg * 1 + 5deg));
    }

    30% {
        transform: translateX(1em) rotate(calc(90deg * 1 - 5deg));
    }

    40%, 45% {
        transform: translateX(2em) rotate(calc(90deg * 2 + 5deg));
    }

    50% {
        transform: translateX(2em) rotate(calc(90deg * 2 - 5deg));
    }

    60%, 65% {
        transform: translateX(3em) rotate(calc(90deg * 3 + 5deg));
    }

    70% {
        transform: translateX(3em) rotate(calc(90deg * 3 - 5deg));
    }

    80% {
        transform: translateX(0) rotate(-5deg);
    }
}

Copier après la connexion

Laisser la barre de bois effectuer une action de projection lorsque la boîte grimpe près du sommet :

.loader {
    animation: throw 3s infinite;
    transform-origin: 20%;
}

@keyframes throw {
    0%, 70%, 100% {
        transform: rotate(-45deg);
    }

    80% {
        transform: rotate(-135deg);
    }
}

Copier après la connexion

Augmente l'effet de la boite en grimpant près du sommet Effet Drop en haut :

@keyframes push {
    70% {
        transform: translateX(3em) translateY(0) rotate(calc(90deg * 3 - 5deg)) scale(1);
        filter: opacity(1);
    }

    80% {
        transform: translateX(0) translateY(-5em) rotate(-5deg) scale(0);
        filter: opacity(0.5);
    }

    90% {
        transform: translateX(0) translateY(0) rotate(0deg) scale(0);
    }
}

Copier après la connexion

Enfin, cache les parties qui peuvent dépasser de la page :