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

效果展示

在这里插入图片描述

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: 48px;
  height: 48px;
  position: relative;
  display: inline-block;
  color: white;
  animation: rotation 1s linear infinite;
}

span::before, span::after {
  position: absolute;
  content: '';
  width: 24px;
  height: 24px;
  top: 0;
  border-radius: 50%;
  background-color: white;
  animation: scale 1s infinite ease-in-out;
}

span::before {
  top: auto;
  bottom: 0;
  background-color: red;
  animation-delay: .5s;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

@keyframes scale {
  0%, 100% {
    transform: scale(0)
  }
  50% {
    transform: scale(1)
  }
}

原理详解

步骤1

使用span标签，设置

• 宽度、高度均为48px
• 使用flex布局
• 其中的元素左右居中

 width: 48px;
  height: 48px;
  display: flex;
  justify-content: center;

效果图如下

在这里插入图片描述

步骤2

使用span::before、span::after伪类元素

其中before作为红色小球，after作为白色小球

设置

• 绝对定位
• 高度、宽度均为24px
• before位于正下方 after位于正上方

span::before, span::after {
  position: absolute;
  content: '';
  width: 24px;
  height: 24px;
}
span::before {
  bottom: 0;
  background-color: red;
}
span::after{
  background-color: white;
  top: 0;
}

效果图如下

在这里插入图片描述

span与span::before、span::after的位置关系

在这里插入图片描述

步骤3

span::before、span::after圆角化

 border-radius: 50%;

效果图如下

在这里插入图片描述

步骤4

为span::before和span::after添加动画

• 初始状态：大小为0（相对于原大小）
• 最终状态：大小为1（相对于原大小）

span::before, span::after {
  animation: scale 1s infinite ease-in-out;
}

@keyframes scale {
  0%, 100% {
    transform: scale(0)
  }
  50% {
    transform: scale(1)
  }
}

效果图如下

在这里插入图片描述

步骤5

对span::before的动画延时

span::before {
  animation-delay: .5s; 
}

效果图如下

动画1

步骤6

为span添加动画

• 顺时针旋转 1s 无限循环

span {
  animation: rotation 1s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

如果此时span::before、span::after设置的动画不起作用

那么此时的效果

动画2

在前面的设置里

我们分别对span、span::before和span::after设置了动画

那么最后的产生的结果就是：两个动画的组合（既在执行动画1，又在执行动画2）

最终视觉效果如下

在这里插入图片描述