純粋な CSS を使用して人の一人歩きのアニメーション効果を実現する方法 (ソースコード添付)

この記事の内容は、純粋な CSS を使用して一人歩きのアニメーション効果を実現する方法に関するものです (ソースコードが添付されています)。必要な友人が参考になれば幸いです。あなたへ。 。

エフェクトのプレビュー

ソースコードのダウンロード

https://github.com/comehop​​e/front-end-daily-challenges

コード解釈

domを定義します。コンテナにはヘッダーとボディを表す3つの要素が含まれますと足:

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

中央の表示:

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

コンテナのサイズを定義:

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

メインカラーを定義:

.man {
    color: white;
}

頭を描画:

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

胴体を描画:

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

足を描画、現在はのみ表示されています 片足には、 2 本の足が重なり合います。しばらく移動すると、2 本の足が見えます:

.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;
}

疑似要素を使用して影を描きます:

.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%;
}

次に、アニメーション効果を追加します。

歩行のアニメーション効果を追加し、両足のアニメーション時間をインターリーブします:

.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);
    }
}

うねる頭と体のアニメーション効果を追加します:

.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);
    }
}

体の動きに合わせて変化する影の領域のアニメーション効果を追加します:

.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);
    }
}

これで完了です！

関連する推奨事項:

純粋な CSS を使用して折り鶴を実装する方法 (ソース コード付き)

純粋な CSS を使用して Apple システムのアルバム アイコンを実装する方法 (コード)

以上が純粋な CSS を使用して人の一人歩きのアニメーション効果を実現する方法 (ソースコード添付)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。