69.纯 CSS 创作一个单元素抛盒子的 loader

原文地址：https://segmentfault.com/a/1190000015470411#articleHeader0

HTML code：

<div class="loader"></div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
/* 设置body子元素水平垂直居中 */
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: teal;
    overflow: hidden;
}
/* 用loader 画出一根木条 */
.loader{
    position: relative;
    font-size: 30px;
    width: 6em;
    border-bottom: 0.25em solid white;
    border-radius: 0.125em;
    /* 设置倾斜 */
    transform: rotate(-45deg);
    left: 1em;
    top: 1em;
    animation: throw 3s infinite;
    /* 固定木条的旋转定点,默认从左往右 */
    transform-origin: 20%;
}
/* 木条抛出盒子的动作 */
@keyframes throw {
    0%, 70%, 100% {
        transform: rotate(-45deg);
    }

    80% {
        transform: rotate(-135deg);
    }
}
/* 用loader的伪元素::before画出一个盒子 */
.loader::before{
    content:'';
    width: 1em;
    height: 1em;
    border: 0.25em solid white;
    border-radius: 0.25em;
    position: absolute;
    left: 0.5em;
    bottom: 0;
    animation: push 3s infinite;
}
@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)); }
    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);
    }
}