本篇文章给大家带来的内容是关于 如何使用纯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;}
大功告成！
相关推荐：
如何使用纯css实现一个人独自行走的动画效果（附源码）如何使用纯css实现一只纸鹤（附源码）
以上就是如何使用纯css实现抛盒子的loader （附源码）的详细内容。