63(原67).纯 CSS 创作单元素点阵 loader

原文地址：https://segmentfault.com/a/1190000015444368

感想：CSS又一次让我见识到它的强大之处 --》 box-shadow 。

box-shadow拓展地址：https://scrimba.com/c/cQpyKbUp

HTML code：

<!-- 定义 dom，只有 1 个元素 -->
<div class="loader"></div>

CSS code：

html, body {
    margin: 0;
    padding: 0;
}
/* 设置所有元素的width、height包括边框、内边距、内容区 */
*{
    box-sizing: border-box;
}
/* 设置body的子元素水平垂直居中 */
body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(darkgreen 30%, forestgreen);
}
/* 设置.loader容器样式 */
.loader {
    /* 在此设置font-size就不要设置后代元素的font-size */
    font-size: 20px;
    width: 10em;
    height: 10em;
    border: 1px solid white;
}
/* 用box-shadow画出2组点阵 */
.loader::before,
.loader::after {
    content: '';
    width: 1em;
    height: 1em;
    border-radius: 50%;
    background-color: currentColor;
    position: absolute;
    box-shadow:
        0 0,   2em 0,   4em 0,   6em 0,
        0 2em, 2em 2em, 4em 2em, 6em 2em,
        0 4em, 2em 4em, 4em 4em, 6em 4em,
        0 6em, 2em 6em, 4em 6em, 6em 6em;
    animation: round 2s ease infinite;
}
.loader::before {
    color: gold;
}
.loader::after {
    color: dodgerblue;
    animation-delay: -1s;
}
@keyframes round {
    0%  { transform: translateX(0) translateY(0);     }
    25% { transform: translateX(3em) translateY(0);   }
    50% { transform: translateX(3em) translateY(3em); }
    75% { transform: translateX(0) translateY(3em);   }
}