原文地址：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:;
padding:;
}
/* 设置所有元素的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); }
}