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

Le contenu de cet article explique comment utiliser du CSS pur pour obtenir l'effet d'animation d'une personne marchant seule (code source ci-joint). J'espère qu'il a une certaine valeur de référence. cela vous aidera. Vous avez aidé.

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définir dom, le conteneur contient 3 éléments, représentant respectivement la tête, le corps et les pieds :

<div>
    <span></span>
    <span></span>
    <span></span>
</div>

Affichage centré :

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(lightgray 20%, whitesmoke);
}

Définition Taille du contenant :

.man {
    width: 12em;
    height: 33em;
    font-size: 10px;
    position: relative;
}

Définir la couleur principale :

.man {
    color: white;
}

Dessiner la tête :

.head {
    position: absolute;
    width: 7em;
    height: 7em;
    background-color: currentColor;
    border-radius: 50%;
    right: 0;
}

Dessiner le corps :

.body {
    position: absolute;
    width: 6.2em;
    height: 14.4em;
    background-color: currentColor;
    top: 7em;
    border-radius: 100% 20% 0 0;
}

Dessinez les pieds. Vous ne pouvez voir qu'un seul pied maintenant car les deux pieds se chevauchent. Lorsque vous bougez, vous pouvez voir les deux pieds :

.feet::before,
.feet::after {
    content: '';
    position: absolute;
    width: 4em;
    height: 1.4em;
    background-color: white;
    bottom: 0;
    left: -1.6em;
    border-radius: 1em 80% 0.4em 0.4em;
}

Dessinez avec des pseudo-éléments Ombre :

.man::before {
    content: '';
    position: absolute;
    width: 12em;
    height: 0.8em;
    background-color: rgba(0, 0, 0, 0.1);
    bottom: -0.2em;
    left: -3em;
    border-radius: 50%;
}

Ensuite, ajoutez des effets d'animation.

Ajoutez une animation de marche et échelonnez le temps d'animation de deux pieds :

.feet::before,
.feet::after {
    animation: feet-animation 2s ease-in-out infinite;
}

.feet::after {
    animation-delay: 1s;
}

@keyframes feet-animation {
    20% {
        transform: translateX(3.4em) translateY(-1.6em) rotate(4deg);
    }

    30% {
        transform: translateX(4.6em) translateY(-1em) rotate(0deg);
    }

    40% {
        transform: translateX(5.6em) translateY(-0.6em) rotate(4deg);
    }

    44% {
        transform: translateX(5.6em) translateY(0) rotate(0deg);
    }
}

Ajoutez une animation de montée de la tête et du corps :

.head,
.body {
    animation: body-animation 4s ease-in-out infinite;
}

@keyframes body-animation {
    0%, 100% {
        transform: translateY(0) skewX(-2deg);
    }

    25%, 75% {
        transform: translateY(0.5em) skewX(0deg);
    }

    50% {
        transform: translateY(0) skewX(0deg);
    }
}

Ajoutez un effet d'animation de changement de zone d'ombre avec mouvement du corps :

.man::before {
    animation: shadow-animate 4s ease-in-out infinite;
}

@keyframes shadow-animate {
    0%, 50%, 100% {
        transform: scale(1);
    }

    25%, 75% {
        transform: scale(1.15);
    }
}

Vous avez terminé !

Recommandations associées :

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

Comment utiliser du CSS pur pour implémenter une icône d'album (code) du système Apple

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!