CSS动画 | 仿 windows 加载界面仿 windows 加载界面 html 整体结构，loading 背景画布，

仿 windows 加载界面

html 整体结构，loading 背景画布，box 存放五个动态运动的 circle

<body>
    <div class="loading">
      <h1>正在关机</h3>
        <div class="box">
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>
    </div>
  </body>

设置背景色以及使 loading 画布充满整个页面；
使用弹性布局使得内容水平垂直居中；

.loading {
  width: 100vw;
  height: 100vh;
  background-color: deepskyblue;
  color: white;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

设置存放小圆点的盒子，使用 overflow: hidden 是为了隐藏小圆点运行过程防止露馅；

.box {
  margin-top: 20px;
  height: 30px;
  width: 130px;

  display: inherit;
  justify-content: center;

  overflow: hidden;
}

加载小圆点解释：

首先设置好小圆点的长宽，以及圆角、背景色等基础属性；
因为我们的小圆点是从左到右排开的，所以我们第一个执行动画的小圆点应该是最后一个，所以 :nth-child(5) 来指定最后一个原点最先开始执行动画
每个圆点执行动画间隔为 0.2s ，使用代码 animation-delay: 0.2s 设置
动画的整体思路：
首先让小圆点直接向右移出盒子边界；
然后在很短时间内让圆点变成透明并迅速移动到盒子的最左边（此刻依然超出边界）
此刻变回小圆点的纯白色
小圆点向右移动，从盒子的左边再次出现，动画达成！

因为我们在动画的最后设置了 transform: translateX(0px) ，所有小圆点都会回到自己原本的位置上，而不会发生所谓的重叠情况！！！

.circle {
  margin-top: 10px;
  margin-left: 10px;
  height: 8px;
  width: 8px;
  border-radius: 4px;
  background-color: white;

  animation: slider 3s ease-in-out infinite;
}
.circle:nth-child(5) {
  animation-delay: 0.2s;
}
.circle:nth-child(4) {
  animation-delay: 0.4s;
}
.circle:nth-child(3) {
  animation-delay: 0.6s;
}
.circle:nth-child(2) {
  animation-delay: 0.8s;
}
.circle:nth-child(1) {
  animation-delay: 1s;
}

@keyframes slider {
  0% {
  }
  30% {
    transform: translateX(200px);
  }
  40%,
  41% {
    background-color: transparent;
    transform: translateX(-200px);
  }
  50% {
    background-color: white;
  }
  90% {
    transform: translateX(0px);
  }
  100% {
  }
}