原文地址：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);   }
}

63(原67).純 CSS 創作單元素點陣 loader