小編給大家分享一下怎么用純CSS實現一個人獨自行走的動畫效果,希望大家閱讀完這篇文章之后都有所收獲,下面讓我們一起去探討吧!
代碼解讀
定義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;
}
畫出腳,現在只能看到一只腳,是因為兩只腳重疊在一起,一會兒動起來時就能看到兩只腳了:
.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實現一個人獨自行走的動畫效果”有了一定的了解,如果想了解更多相關知識,歡迎關注億速云行業資訊頻道,感謝各位的閱讀!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。