Maison > interface Web > tutoriel CSS > le corps du texte

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
1561 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 :

body {
    overflow: hidden;
}
Copier après la connexion

Tu' c'est fini !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir l'effet d'animation d'une personne marchant seule (code source ci-joint)

Comment utiliser du CSS pur pour implémenter une grue en papier (avec code source)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal