如何使用純CSS實現一個人獨自行走的動畫效果（附源碼）

本篇文章給大家帶來的內容是關於如何使用純CSS實現一個人獨自行走的動畫效果（附源碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

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

代碼解讀

定義 dom，容器中包含 3 個元素，分別代表頭、身體和腳：

<div class="man">    <span class="head"></span>    <span class="body"></span>    <span class="feet"></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;}

畫出腳，現在只能看到一隻腳，是因為兩隻腳重疊在一起，一會兒動起來時就能看到兩隻腳了：

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

大功告成！