CSS Grid Loading

使用CSS3的Grid网格布局实现Loading加载页的动画效果，制作的思路是使用Grid网格布局制作3x3的九宫格，旋转后形成菱形，在添加动画效果。

Loading

绘制九宫格

<style>
/*wrapper*/
.wrapper{margin:0; height:100vh; background-color:#000;}
.flex-container{display:flex; justify-content:center; align-items:center;}
/*loading*/
.inner{width:10em; height:10em;}
.grid-container{display:grid; grid-template-columns:repeat(3, 33.3%); grid-template-rows:repeat(3, 33.3%); grid-gap:0.5em;}
/*item*/
.grid-item{background-color:var(--color);}
.grid-item:nth-child(4n+1){--color:#44bb44;}
.grid-item:nth-child(2n+2){--color:#f13f84;}
.grid-item:nth-child(4n+3){--color:#46b0ff;}
</style>

<div class="wrapper flex-container">
  <div class="inner grid-container">
    <div class="grid-item flex-container">1</div>
    <div class="grid-item flex-container">2</div>
    <div class="grid-item flex-container">3</div>
    <div class="grid-item flex-container">4</div>
    <div class="grid-item flex-container">5</div>
    <div class="grid-item flex-container">6</div>
    <div class="grid-item flex-container">7</div>
    <div class="grid-item flex-container">8</div>
    <div class="grid-item flex-container">9</div>
  </div> 
</div>

• 最外层wrapper的height使用100vh表示高度100%
• 最外层wrapper中使用Flexbox布局使其弹性项目水平垂直居中对齐
• 内层inner固定宽高为10em x 10em，并使用Grid布局生成就3x3的九宫格，宫格间隔为0.5em。
• Grid栅格项目统一使用var(--name)的形式在CSS中定义了一个名为color的变量，用于设置背景色。
• Grid删除项目使用伪类选择器nth-child根据规则获取子类并赋予相同背景色，其中n默认从0开始。

获取子类

• nth-child(2n+2)表示获取索引为偶数的网格项目，即第2、4、6、8...个。
• nth-child(4n+1)表示获取斜线方向的项目，即第1、5、9...个。
• nth-child(4n+3)表示获取反斜线方向的项目，即第3、7...个。

九宫格

旋转成菱形

定义一个水平旋转45度的类，将其添加到inner中即可实现九宫格的旋转。

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

<div class="inner grid-container rotate-45"></div>

菱形

添加动画

为网格项目添加名为blinking的帧动画，动画整个时长为2秒，动画的速度曲线即缓动效果采用ease-in-out由慢到快的擦除，为每个网格项目均添加不同的执行延时时长，最后永久的执行这个动画。

定义帧动画

@keyframes blinking{
  0%, 20%{transform:rotate(0deg) scale(0);}
  40%, 80%{transform:rotate(1turn) scale(1);}
  100%{transform:rotate(2turn) scale(0);}
}

blinking帧动画的效果是当元素到达指定时刻时指定对应的旋转和缩放

transform:rotate(1turn) scale(1);

rotate(1turn)表示旋转一圈，scale(1)表示缩放倍数为1。

绑定帧动画

.aniation{
  animation:blinking 2s var(--delay) ease-in-out infinite;
  animation-fill-mode:backwards;
}

使用animation定义动画

animation: name duration timing-function delay iteration-count direction;

参数	描述
name	表示需绑定到选择器上的帧动画keyframes的名称
duration	表示执行帧动画所需耗费的时间，单位为秒或毫秒。
timing-function	表示执行帧动画的速度曲线类型，即缓动类型。
delay	表示在执行帧动画前的延迟时长，单位为秒或毫秒。
iteration-count	表示帧动画播放的次数，infinite表示无限播放。
direction	表示是否轮流反向执行帧动画

帧动画的速度曲线（贝塞尔曲线）

/*n的取值范围为0到1之间*/
cubic-bezier(n, n, n, n)

曲线类型	描述
linear	匀速，表示以相同速度开始至结束的过渡，等同于cubic-bezier(0, 0, 1, 1)曲线。
ease	相对匀速中间快两头慢，表示慢速开始然后加快接着慢速结束的过渡，等同于cubic-bezier(0.25, 0.1, 0.25, 1)。
ease-in	相对匀速开始慢之后快，表示以慢速开始的过渡效果，等同于cubic-bezier(0.42, 0, 1, 1)。
ease-out	相对匀速开始快结束慢，表示以慢速开始并结束的过渡效果，等同于cubic-bezier(0, 0, 0.58, 1)。
ease-in-out	起止均慢，表示以慢速开始和结束的过渡效果，等同于cubic-bezier(0.42, 0, 0.58, 1)。

帧动画填充模式

animation-fill-mode: none | forwards | backwards | both;

animation-fill-mode属性表示动画在播放之前或之后，其动画效果是否可见。

填充模式	描述
none	不改变默认行为
forwards	表示当动画结束后，保持最后一个属性值，在最后一个关键帧中定义。
backwards	在animation-delay指定的一段时间内，即动画显示之前应用开始属性，在第一个关键帧中定义。
both	向前和前后填充模式均被应用

设置延迟时长

.grid-item:nth-child(7){--delay:0s;}
.grid-item:nth-child(4n+4){--delay:0.2s;}
.grid-item:nth-child(4n+1){--delay:0.4s;}
.grid-item:nth-child(4n+2){--delay:0.6s;}
.grid-item:nth-child(3){--delay:0.8s;}

完整代码

/*wrapper*/
.wrapper{margin:0; height:100vh; background-color:#000;}
.flex-container{display:flex; justify-content:center; align-items:center;}
/*loading*/
.inner{width:10em; height:10em;}
.grid-container{display:grid; grid-template-columns:repeat(3, 33.3%); grid-template-rows:repeat(3, 33.3%); grid-gap:0.5em;}
/*item*/
.grid-item{background-color:var(--color);}
.grid-item:nth-child(4n+1){--color:#44bb44;}
.grid-item:nth-child(2n+2){--color:#f13f84;}
.grid-item:nth-child(4n+3){--color:#46b0ff;}
/*rotate*/
.rotate-45{transform:rotate(45deg);}
/*animation*/
@keyframes blinking{
  0%, 20%{transform:rotate(0deg) scale(0);}
  40%, 80%{transform:rotate(1turn) scale(1);}
  100%{transform:rotate(2turn) scale(0);}
}
.aniation{
  animation:blinking 2s var(--delay) ease-in-out infinite;
  animation-fill-mode:backwards;
}
.grid-item:nth-child(7){--delay:0s;}
.grid-item:nth-child(4n+4){--delay:0.2s;}
.grid-item:nth-child(4n+1){--delay:0.4s;}
.grid-item:nth-child(4n+2){--delay:0.6s;}
.grid-item:nth-child(3){--delay:0.8s;}

<div class="wrapper flex-container">
  <div class="inner grid-container rotate-45">
    <div class="grid-item flex-container aniation">1</div>
    <div class="grid-item flex-container aniation">2</div>
    <div class="grid-item flex-container aniation">3</div>
    <div class="grid-item flex-container aniation">4</div>
    <div class="grid-item flex-container aniation">5</div>
    <div class="grid-item flex-container aniation">6</div>
    <div class="grid-item flex-container aniation">7</div>
    <div class="grid-item flex-container aniation">8</div>
    <div class="grid-item flex-container aniation">9</div>
  </div> 
</div>