怎么用純CSS實現(xiàn)一個人獨自行走的動畫效果

小編給大家分享一下怎么用純CSS實現(xiàn)一個人獨自行走的動畫效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

　　代碼解讀

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

　　<divclass="man">

　　<spanclass="head"></span>

　　<spanclass="body"></span>

　　<spanclass="feet"></span>

　　</div>

　　居中顯示：

　　body{

　　margin:0;

　　height:100vh;

　　display:flex;

　　align-items:center;

　　justify-content:center;

　　background:radial-gradient(lightgray20%,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%00;

　　}

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

　　.feet::before,

　　.feet::after{

　　content:'';

　　position:absolute;

　　width:4em;

　　height:1.4em;

　　background-color:white;

　　bottom:0;

　　left:-1.6em;

　　border-radius:1em80%0.4em0.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-animation2sease-in-outinfinite;

　　}

　　.feet::after{

　　animation-delay:1s;

　　}

　　@keyframesfeet-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-animation4sease-in-outinfinite;

　　}

　　@keyframesbody-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-animate4sease-in-outinfinite;

　　}

　　@keyframesshadow-animate{

　　0%,50%,100%{

　　transform:scale(1);

　　}

　　25%,75%{

　　transform:scale(1.15);

　　}

　　}

看完了這篇文章，相信你對“怎么用純CSS實現(xiàn)一個人獨自行走的動畫效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！