您好,登錄后才能下訂單哦!
這篇文章主要介紹使用純CSS實(shí)現(xiàn)拋盒子loader的方法,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
https://github.com/comehope/front-end-daily-challenges
定義 dom,只有 1 個(gè)元素:
<div class="loader"></div>
居中顯示:
body { margin: 0; height: 100vh; display: flex; align-items: center; justify-content: center; background-color: teal; }
畫出一根木條:
.loader { width: 6em; border-bottom: 0.25em solid white; font-size: 30px; border-radius: 0.125em; }
用偽元素在其上畫出一個(gè)盒子:
.loader { position: relative; } .loader::before { content: ''; position: absolute; width: 1em; height: 1em; border: 0.25em solid white; bottom: 0; left: 0.5em; border-radius: 0.25em; }
讓圖案傾斜,形成盒子在坡上的效果:
.loader { transform: rotate(-45deg); left: 1em; top: 1em; }
接下來(lái)制作動(dòng)畫。
讓盒子一步步爬坡,爬到坡頂再重爬:
.loader::before { animation: push 3s infinite; } @keyframes push { 0% { transform: translateX(0); } 20%, 25% { transform: translateX(1em); } 40%, 45% { transform: translateX(2em); } 60%, 65% { transform: translateX(3em); } 80% { transform: translateX(0); } }
增加盒子在爬坡的過(guò)程中的滾動(dòng)效果:
@keyframes push { 0% { transform: translateX(0) rotate(0deg); } 20%, 25% { transform: translateX(1em) rotate(calc(90deg * 1)); } 40%, 45% { transform: translateX(2em) rotate(calc(90deg * 2)); } 60%, 65% { transform: translateX(3em) rotate(calc(90deg * 3)); } 80% { transform: translateX(0) rotate(0deg); } }
增加盒子在爬坡過(guò)程中的擬人效果:
@keyframes push { 0% { transform: translateX(0) rotate(0deg); } 5% { transform: translateX(0) rotate(-5deg); } 20%, 25% { transform: translateX(1em) rotate(calc(90deg * 1 + 5deg)); } 30% { transform: translateX(1em) rotate(calc(90deg * 1 - 5deg)); } 40%, 45% { transform: translateX(2em) rotate(calc(90deg * 2 + 5deg)); } 50% { transform: translateX(2em) rotate(calc(90deg * 2 - 5deg)); } 60%, 65% { transform: translateX(3em) rotate(calc(90deg * 3 + 5deg)); } 70% { transform: translateX(3em) rotate(calc(90deg * 3 - 5deg)); } 80% { transform: translateX(0) rotate(-5deg); } }
讓木條在箱子爬到接近頂點(diǎn)時(shí)做拋擲動(dòng)作:
.loader { animation: throw 3s infinite; transform-origin: 20%; } @keyframes throw { 0%, 70%, 100% { transform: rotate(-45deg); } 80% { transform: rotate(-135deg); } }
增加盒子在爬到接近頂點(diǎn)時(shí)的掉落效果:
@keyframes push { 70% { transform: translateX(3em) translateY(0) rotate(calc(90deg * 3 - 5deg)) scale(1); filter: opacity(1); } 80% { transform: translateX(0) translateY(-5em) rotate(-5deg) scale(0); filter: opacity(0.5); } 90% { transform: translateX(0) translateY(0) rotate(0deg) scale(0); } }
最后,隱藏掉可能超出頁(yè)面的部分:
body { overflow: hidden; }
以上是使用純CSS實(shí)現(xiàn)拋盒子loader的方法的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(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)容。