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

Comment utiliser du CSS pur pour obtenir l'effet d'animation des étapes de saut de balle (code source ci-joint)

不言
Libérer: 2018-09-04 11:18:26
original
2642 Les gens l'ont consulté

Le contenu de cet article explique comment utiliser du CSS pur pour réaliser l'effet d'animation des étapes de saut de balle (code source ci-joint). J'espère qu'il a une certaine valeur de référence. vous sera utile.

Aperçu de l'effet

Comment utiliser du CSS pur pour obtenir leffet danimation des étapes de saut de balle (code source ci-joint)

Téléchargement du code source

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

Interprétation du code

Définir dom, le conteneur contient 5 éléments, représentant 5 étapes :

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>
Copier après la connexion

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
}
Copier après la connexion

Définissez la taille du conteneur :

.loader {
    width: 7em;
    height: 5em;
    font-size: 40px;
}
Copier après la connexion

Dessinez 5 étapes :

.loader {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.loader span {
    width: 1em;
    height: 1em;
    background-color: white;
}
Copier après la connexion

Utilisez des variables pour trier les 5 étapes de bas en haut :

.loader span {
    height: calc(var(--n) * 1em);
}

.loader span:nth-child(1) {
    --n: 1;
}

.loader span:nth-child(2) {
    --n: 2;
}

.loader span:nth-child(3) {
    --n: 3;
}

.loader span:nth-child(4) {
    --n: 4;
}

.loader span:nth-child(5) {
    --n: 5;
}
Copier après la connexion

Ajoutez l'effet d'animation de changement de sens de tri aux étapes :

.loader span {
    animation: sort 5s infinite;
}

@keyframes sort {
    0%, 40%, 100% {
        height: calc(var(--n) * 1em);
    }

    50%, 90% {
        height: calc(5em - (var(--n) - 1) * 1em);
    }
}
Copier après la connexion

L'animation des petites boules est réalisée ci-dessous, en utilisant une méthode aveuglante pour faire le mouvement alterné de deux petites boules de même couleur ressemble à une petite balle. La balle est en mouvement alternatif.

Dessinez 2 petites boules à l'aide de pseudo-éléments :

.loader::before,
.loader::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    background-color: white;
    border-radius: 50%;
    bottom: 1em;
}

.loader::before {
    left: 0;
}

.loader::after {
    left: 6em;
}
Copier après la connexion

Ajoutez l'effet d'animation pour faire monter la boule :

.loader::before,
.loader::after {
    animation: climbing 5s infinite;
    visibility: hidden;
}

.loader::after {
    animation-delay: 2.5s;
}

@keyframes climbing {
    0% {
        bottom: 1em;
        visibility: visible;
    }

    10% {
        bottom: 2em;
    }

    20% {
        bottom: 3em;
    }

    30% {
        bottom: 4em;
    }

    40% {
        bottom: 5em;
    }

    50% {
        bottom: 1em;
    }

    50%, 100% {
        visibility: hidden;
    }
}
Copier après la connexion

Déplacez-vous vers le haut tout en montant Déplacez les deux côtés pour former l'effet d'animation de la montée des marches :

.loader::before {
    --direction: 1;
}

.loader::after {
    --direction: -1;
}

@keyframes climbing {
    0% {
        bottom: 1em;
        left: calc(3em - 2 * 1.5em * var(--direction));
        visibility: visible;
    }

    10% {
        bottom: 2em;
        left: calc(3em - 1 * 1.5em * var(--direction));
    }

    20% {
        bottom: 3em;
        left: calc(3em - 0 * 1.5em * var(--direction));
    }

    30% {
        bottom: 4em;
        left: calc(3em + 1 * 1.5em * var(--direction));
    }

    40% {
        bottom: 5em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50% {
        bottom: 1em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50%, 100% {
        visibility: hidden;
    }
}
Copier après la connexion

Enfin, ajoutez un effet anthropomorphe à l'action de monter les marches :

@keyframes climbing {
    0% {
        bottom: 1em;
        left: calc(3em - 2 * 1.5em * var(--direction));
        visibility: visible;
    }

    7% {
        bottom: calc(2em + 0.3em);
    }

    10% {
        bottom: 2em;
        left: calc(3em - 1 * 1.5em * var(--direction));
    }

    17% {
        bottom: calc(3em + 0.3em);
    }

    20% {
        bottom: 3em;
        left: calc(3em - 0 * 1.5em * var(--direction));
    }

    27% {
        bottom: calc(4em + 0.3em);
    }

    30% {
        bottom: 4em;
        left: calc(3em + 1 * 1.5em * var(--direction));
    }

    37% {
        bottom: calc(5em + 0.3em);
    }

    40% {
        bottom: 5em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50% {
        bottom: 1em;
        left: calc(3em + 2 * 1.5em * var(--direction));
    }

    50%, 100% {
        visibility: hidden;
    }
}
Copier après la connexion

Vous avez terminé !

Recommandations associées :

Comment utiliser du CSS pur pour obtenir un effet d'animation d'une roue de vélo en rotation

Comment utiliser du CSS pur pour obtenir un animation similaire à un drapeau agitant Effet (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