怎么用純CSS實(shí)現(xiàn)小球跳躍臺(tái)階的動(dòng)畫(huà)效果
這篇文章將為大家詳細(xì)講解有關(guān)怎么用純CSS實(shí)現(xiàn)小球跳躍臺(tái)階的動(dòng)畫(huà)效果，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。
目前創(chuàng)新互聯(lián)公司已為成百上千家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管運(yùn)營(yíng)、企業(yè)網(wǎng)站設(shè)計(jì)、離石網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長(zhǎng)，共同發(fā)展。
代碼解讀
定義dom，容器中包含5個(gè)元素，代表5個(gè)臺(tái)階：
<divclass="loader">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
居中顯示：
body{
margin:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background-color:black;
}
定義容器尺寸：
.loader{
width:7em;
height:5em;
font-size:40px;
}
畫(huà)出5個(gè)臺(tái)階：
.loader{
display:flex;
justify-content:space-between;
align-items:flex-end;
}
.loaderspan{
width:1em;
height:1em;
background-color:white;
}
用變量讓5個(gè)臺(tái)階從低到高排序：
.loaderspan{
height:calc(var(--n)*1em);
}
.loaderspan:nth-child(1){
--n:1;
}
.loaderspan:nth-child(2){
--n:2;
}
.loaderspan:nth-child(3){
--n:3;
}
.loaderspan:nth-child(4){
--n:4;
}
.loaderspan:nth-child(5){
--n:5;
}
為臺(tái)階增加轉(zhuǎn)換排序方向的動(dòng)畫(huà)效果：
.loaderspan{
animation:sort5sinfinite;
}
@keyframessort{
0%,40%,100%{
height:calc(var(--n)*1em);
}
50%,90%{
height:calc(5em-(var(--n)-1)*1em);
}
}
下面做小球的動(dòng)畫(huà)，用了障眼法，使2個(gè)同色小球的交替運(yùn)動(dòng)看起來(lái)就像1個(gè)小球在做往復(fù)運(yùn)動(dòng)。
用偽元素畫(huà)出2個(gè)小球：
.loader::before,
.loader::after{
content:'';
position:absolute;
width:1em;
height:1em;
background-color:white;
border-radius:50%;
bottom:1em;
}
.loader::before{
left:0;
}
.loader::after{
left:6em;
}
增加讓小球向上運(yùn)動(dòng)的動(dòng)畫(huà)效果：
.loader::before,
.loader::after{
animation:climbing5sinfinite;
visibility:hidden;
}
.loader::after{
animation-delay:2.5s;
}
@keyframesclimbing{
0%{
bottom:1em;
visibility:visible;
}
10%{
bottom:2em;
}
20%{
bottom:3em;
}
30%{
bottom:4em;
}
40%{
bottom:5em;
}
50%{
bottom:1em;
}
50%,100%{
visibility:hidden;
}
}
在向上運(yùn)動(dòng)的同時(shí)向兩側(cè)運(yùn)動(dòng)，形成上臺(tái)階的動(dòng)畫(huà)效果：
.loader::before{
--direction:1;
}
.loader::after{
--direction:-1;
}
@keyframesclimbing{
0%{
bottom:1em;
left:calc(3em-2*1.5em*var(--direction));
visibility:visible;
}
10%{
bottom:2em;
left:calc(3em-1*1.5em*var(--direction));
}
20%{
bottom:3em;
left:calc(3em-0*1.5em*var(--direction));
}
30%{
bottom:4em;
left:calc(3em+1*1.5em*var(--direction));
}
40%{
bottom:5em;
left:calc(3em+2*1.5em*var(--direction));
}
50%{
bottom:1em;
left:calc(3em+2*1.5em*var(--direction));
}
50%,100%{
visibility:hidden;
}
}
最后，為上臺(tái)階的動(dòng)作增加擬人效果：
@keyframesclimbing{
0%{
bottom:1em;
left:calc(3em-2*1.5em*var(--direction));
visibility:visible;
}
7%{
bottom:calc(2em+0.3em);
}
10%{
bottom:2em;
left:calc(3em-1*1.5em*var(--direction));
}
17%{
bottom:calc(3em+0.3em);
}
20%{
bottom:3em;
left:calc(3em-0*1.5em*var(--direction));
}
27%{
bottom:calc(4em+0.3em);
}
30%{
bottom:4em;
left:calc(3em+1*1.5em*var(--direction));
}
37%{
bottom:calc(5em+0.3em);
}
40%{
bottom:5em;
left:calc(3em+2*1.5em*var(--direction));
}
50%{
bottom:1em;
left:calc(3em+2*1.5em*var(--direction));
}
50%,100%{
visibility:hidden;
}
}
關(guān)于“怎么用純CSS實(shí)現(xiàn)小球跳躍臺(tái)階的動(dòng)畫(huà)效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。
當(dāng)前文章：怎么用純CSS實(shí)現(xiàn)小球跳躍臺(tái)階的動(dòng)畫(huà)效果
網(wǎng)站鏈接：http://aaarwkj.com/article34/jjpipe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營(yíng)銷(xiāo)型網(wǎng)站建設(shè)、面包屑導(dǎo)航、用戶體驗(yàn)、品牌網(wǎng)站制作、網(wǎng)站內(nèi)鏈、App開(kāi)發(fā)
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)
