css3 grid布局实现loading动画效果

思路：

1、将body变成弹性布局（非必要）

2、设定div包裹着九个span盒子，div设定成网格布局，并将其旋转九十度

3、为span标签添加颜色与动画和动画延迟

知识点：

1、在css3中使用变量需要使用一个var()函数;然后将所需的变量写在var()中。

注意：使用变量不能少了–(两个减号)
格式:
元素{
属性：var(变量名);
}

  .loading span{
            /* var(--color)中color是变量名，必须要加-- */
            background-color: var(--color);
        }
  .loading span:nth-child(2n+2){
            /* n的初始值为0； */
            --color:rgb(227, 243, 0);
        }

<div class="loading">
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span>7</span>
  <span>8</span>
  <span>9</span>
</div>

css

* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

body {
  background-color: skyblue;
  display: flex;
  /* 将body标签转化为弹性容器 */
  flex-flow: row wrap;
  /* 水平居中显示 */
  justify-content: center;
  /* 垂直居中显示 */
  align-items: center;
}

.loading {
  width: 10em;
  height: 10em;
  /* 将loading转化为网格容器 */
  display: grid;
  /* 3列 */
  grid-template-columns: repeat(3, 1fr);
  /* 设置每个项目之间的行，列间距，如果列，行间距一样，可以简写为grid-gap：0.5em;*/
  grid-gap: 0.5em 0.5em;
}

.loading span {
  /* var(--color)中color是变量名，必须要加-- */
  background-color: var(--color);
}

.loading span:nth-child(2n+2) {
  /* n的初始值为0； */
  --color: rgb(227, 243, 0);
}

.loading span:nth-child(4n+3) {
  --color: rgb(49, 233, 187);
}

.loading span:nth-child(4n+1) {
  --color: rgb(21, 92, 224);
}

.loading {
  transform: rotate(45deg);
}

.loading span {
  /* 动画播放时间后再添加时间表示动画延迟时间 */
  animation: run 2s var(--delay) ease-in-out infinite;
  /* 返回到第一帧 */
  /* animation-fill-mode: backwards; */
}

.loading span:nth-child(7) {
  --delay: 0s;
}

.loading span:nth-child(4n+4) {
  --delay: 0.2s;
}

.loading span:nth-child(4n+1) {
  --delay: 0.4s;
}

.loading span:nth-child(4n+2) {
  --delay: 0.6s;
}

.loading span:nth-child(3) {
  --delay: 0.8s;
}

@keyframes run {

  0%,
  20% {
    /* scale缩放比例 */
    transform: rotate(0) scale(0);
  }

  40%,
  80% {
    transform: rotate(360deg) scale(1);
  }

  100% {
    transform: rotate(2turn) scale(0);
  }
}

代码演示：