如何使用純CSS實現拋盒子的loader （附源碼）

本篇文章給大家帶來的內容是關於 如何使用純CSS實現拋盒子的loader （附源碼），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所協助。

效果預覽

原始碼下載

https://github.com/comehope/front-end-daily-challenges

代碼解讀

定義 dom，只有 1 個元素：

<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;}

用虛擬元素在其上畫出一個盒子：

.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;}

接下來製作動畫。

讓盒子一步步爬坡，爬到坡頂再重爬：

.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);    }}

增加盒子在爬坡的過程中的滾動效果：

@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);    }}

增加盒子在爬坡過程中的擬人效果：

@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);    }}

讓木條在箱子爬到接近頂點時做拋擲動作：

.loader {    animation: throw 3s infinite;    transform-origin: 20%;}@keyframes throw {    0%, 70%, 100% {        transform: rotate(-45deg);    }    80% {        transform: rotate(-135deg);    }}

增加盒子在爬到接近頂點時的掉落效果：

@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);    }}

最後，隱藏掉可能超出頁面的部分：

body {    overflow: hidden;}

大功告成！