您好,登錄后才能下訂單哦!
小編給大家分享一下怎么使用純CSS實(shí)現(xiàn)小球跳躍臺(tái)階的動(dòng)畫效果,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
https://github.com/comehope/front-end-daily-challenges
定義 dom,容器中包含 5 個(gè)元素,代表 5 個(gè)臺(tái)階:
<div class="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; }
畫出 5 個(gè)臺(tái)階:
.loader { display: flex; justify-content: space-between; align-items: flex-end; } .loader span { width: 1em; height: 1em; background-color: white; }
用變量讓 5 個(gè)臺(tái)階從低到高排序:
.loader span { height: calc(var(--n) * 1em); } .loader span:nth-child(1) { --n: 1; } .loader span:nth-child(2) { --n: 2; } .loader span:nth-child(3) { --n: 3; } .loader span:nth-child(4) { --n: 4; } .loader span:nth-child(5) { --n: 5; }
為臺(tái)階增加轉(zhuǎn)換排序方向的動(dòng)畫效果:
.loader span { animation: sort 5s infinite; } @keyframes sort { 0%, 40%, 100% { height: calc(var(--n) * 1em); } 50%, 90% { height: calc(5em - (var(--n) - 1) * 1em); } }
下面做小球的動(dòng)畫,用了障眼法,使 2 個(gè)同色小球的交替運(yùn)動(dòng)看起來(lái)就像 1 個(gè)小球在做往復(fù)運(yùn)動(dòng)。
用偽元素畫出 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)畫效果:
.loader::before, .loader::after { animation: climbing 5s infinite; visibility: hidden; } .loader::after { animation-delay: 2.5s; } @keyframes climbing { 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)畫效果:
.loader::before { --direction: 1; } .loader::after { --direction: -1; } @keyframes climbing { 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)作增加擬人效果:
@keyframes climbing { 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; } }
看完了這篇文章,相信你對(duì)怎么使用純CSS實(shí)現(xiàn)小球跳躍臺(tái)階的動(dòng)畫效果有了一定的了解,想了解更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。