Maison  >  Article  >  interface Web  >  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 obtenir l'effet d'animation d'une personne marchant seule (code source ci-joint)

不言
不言original
2018-09-03 09:36:472672parcourir

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

Comment utiliser du CSS pur pour obtenir leffet danimation dune personne marchant seule (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, 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!

Déclaration:
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