原文地址：

感想： 网格布局-》 display: grid;

HTML code:

CSS code:

html, body {
          margin: 0;    padding: 0;}body{
          height: 100vh;    display: flex;    justify-content: center;    align-items: center;    background-color: black;}.loader{
          width: 10em;    height: 10em;    /* 网格布局 */    display: grid;    grid-template-columns: repeat(3, 1fr);    grid-gap: 0.5em;    /* 旋转 ： 45度 */    transform: rotate(45deg);}/* 以竖向的小菱形为单位，为小菱形涂颜色 */.loader span{
          background-color: var(--c);    animation: blinking 2s linear var(--d) infinite;    /* animation-delay: var(--d); */    transform: scale(0);}/* blinking : 闪烁 */@keyframes blinking{
          0%,100%{        transform: scale(0);    }    40%,80%{
              transform: scale(1);    }}.loader span:nth-child(7) {
          --c: tomato;    --d: 0s;}.loader span:nth-child(4),.loader span:nth-child(8) {
          --c: gold;    --d: 0.2s;}.loader span:nth-child(1),.loader span:nth-child(5),.loader span:nth-child(9) {
          --c: limegreen;    --d: 0.4s;}.loader span:nth-child(2),.loader span:nth-child(6) {
          --c: dodgerblue;    --d: 0.6s;}.loader span:nth-child(3) {
          --c: mediumpurple;    --d: 0.8s;}