「HTML+CSS」自定义加载动画【049】

效果展示

在这里插入图片描述

Demo代码

HTML

CSS

html, body {
  margin: 0;
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 红色边框仅作提示 */
  border: 2px solid red;
}

span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  color: white;
  animation: loading 1s linear infinite alternate;
}

@keyframes loading {
  0% {
    box-shadow: -76px -26px, -26px 0, 26px 0, 76px 0
  }
  33% {
    box-shadow: -76px 0px, -26px -26px, 26px 0, 76px 0
  }
  66% {
    box-shadow: -76px 0px, -26px 0, 26px -26px, 76px 0
  }
  100% {
    box-shadow: -76px 0, -26px 0, 26px 0, 76px -26px
  }
}

原理详解

步骤1

使用span标签，设置

• 宽度、高度均为24px
• 背景色：红色

效果图如下

在这里插入图片描述

步骤2

span标签圆角化

 border-radius: 50%;

效果图如下

在这里插入图片描述

步骤3

为span添加动画

借助span的阴影实现（box-shadow）

关键有四帧

第一帧

• 使用阴影充当白色小球
• 第一个白色小球位于红色小球左侧76px 上方26px处
• 其余小球竖直移动距离都为0

box-shadow: -76px -26px, -26px 0, 26px 0, 76px 0

效果图如下

在这里插入图片描述

第二帧

• 第二个白色小球横向位移不变，竖直上移26px

  box-shadow: -76px 0px, -26px -26px, 26px 0, 76px 0

效果图如下

在这里插入图片描述

第三帧

• 第三个白色小球横向位移不变，竖直上移26px

box-shadow: -76px 0px, -26px 0, 26px -26px, 76px 0  

效果图如下

在这里插入图片描述

第四帧

• 第四个白色小球横向位移不变，竖直上移26px

 box-shadow: -76px 0, -26px 0, 26px 0, 76px -26px

效果图如下

在这里插入图片描述

再注释带span背景色

最后，综上

动画代码为

 animation: loading 1s linear infinite alternate;

@keyframes loading {
  0% {
    box-shadow: -76px -26px, -26px 0, 26px 0, 76px 0
  }
  33% {
    box-shadow: -76px 0px, -26px -26px, 26px 0, 76px 0
  }
  66% {
    box-shadow: -76px 0px, -26px 0, 26px -26px, 76px 0
  }
  100% {
    box-shadow: -76px 0, -26px 0, 26px 0, 76px -26px
  }
}

效果图如下

在这里插入图片描述