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

效果展示

在这里插入图片描述

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;
    /* background-color: red; */
    animation: loading 2s linear infinite;
}
@keyframes loading {
  0% {  box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 -2px
  }   
  
  25% {  box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 2px
  }    
  
  50% {  box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 2px,  -78px 0 0 -2px
  }  
  75% {  box-shadow:   26px 0 0 2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 -2px
  }  
  100% {  box-shadow:   26px 0 0 -2px,  78px 0 0 2px, 
                      -26px 0 0 -2px,  -78px 0 0 -2px
  }   
}

原理详解

步骤1

使用span标签，设置为

• 宽度、高度均为24px

• 背景色：红色

  
  
  在这里插入图片描述

步骤2

span标签圆角化

border-radius: 50%;

在这里插入图片描述

步骤3

为span添加动画

使用box-shadow充当白色小球

关键有五帧

第一帧

• 初始位置
• 分别利用box-shadow定义四个白色小球（span的阴影）
• 分别位于红色小球的左右方

    box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
    -26px 0 0 -2px,  -78px 0 0 -2px;

效果图如下

在这里插入图片描述

第二帧

将最左边小球变大，其余不变

   box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 2px;

效果图如下

在这里插入图片描述

第三帧

将左边第二个小球变大，其余不变

 box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 2px,  -78px 0 0 -2px;
   

效果图如下

在这里插入图片描述

第四帧

将左边第三个小球变大，其余不变

 box-shadow:   26px 0 0 2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 -2px
 

效果图如下

在这里插入图片描述

第五帧

将左边第四个小球变大，其余不变

   box-shadow:   26px 0 0 -2px,  78px 0 0 2px, 
    -26px 0 0 -2px,  -78px 0 0 -2px;

效果图如下

在这里插入图片描述

最后再注释掉span的背景色即可

综上描述

代码为

  animation: loading 2s linear infinite; 

@keyframes loading {
  0% {  box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 -2px
  }   
  
  25% {  box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 2px
  }    
  
  50% {  box-shadow:   26px 0 0 -2px,  78px 0 0 -2px, 
                      -26px 0 0 2px,  -78px 0 0 -2px
  }  
  75% {  box-shadow:   26px 0 0 2px,  78px 0 0 -2px, 
                      -26px 0 0 -2px,  -78px 0 0 -2px
  }  
  100% {  box-shadow:   26px 0 0 -2px,  78px 0 0 2px, 
                      -26px 0 0 -2px,  -78px 0 0 -2px
  }   
}

效果图如下

在这里插入图片描述