【动画消消乐】HTML+CSS 自定义加载动画 060

效果展示

在这里插入图片描述

Demo代码

HTML

CSS

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

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

section {
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid white;
}

span {
  width: 36px;
  height: 36px;
  display: inline-block;
  position: relative;
  background: white;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0)
  }
  25% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg)
  }
  50% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
  }
  75% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
  }
  100% {
    transform: translate(0, 0) rotateX(0) rotateY(360deg)
  }
}

涉及知识点（需了解）

transform属性中的

• translate：定义 2D 转换
• rotateX：沿着 X 轴的 3D 旋转
• rotateY：沿着 Y 轴的 3D 旋转

原理详解

步骤1

使用span标签，设置为

• 宽度、高度均为36px
• 相对定位
• 背景色：白色

span {
  width: 36px;
  height: 36px;
  position: relative;
  background: white;
}

效果图如下

在这里插入图片描述

步骤2

为span添加动画 有5个关键帧

第一帧（初始状态）

• 二维空间：右移：0 下移：0
• 三维空间：绕x轴旋转0度 绕y轴旋转0度

 transform: translate(0, 0) rotateX(0) rotateY(0)

第二帧（相对于初始状态）

• 二维空间：右移：100% 下移：0 （100%是指相对于自身的大小，若自身宽100px 那就移动100px）
• 三维空间：绕x轴旋转0度 绕y轴旋转180度

transform: translate(100%, 0) rotateX(0) rotateY(180deg)

第一帧 过渡至 第二帧 效果图如下

在这里插入图片描述

第三帧 （相对于初始状态）

• 二维空间：右移：100% 下移：100%
• 三维空间：绕x轴旋转-180度 绕y轴旋转180度

  transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)

第二帧 过渡至 第三帧 效果图如下

在这里插入图片描述

第四帧（相对于初始状态）

• 二维空间：右移：0 下移：100%
• 三维空间：绕x轴旋转-180度 绕y轴旋转360度

transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)

第三帧 过渡至 第四帧 效果图如下

在这里插入图片描述

第五帧（相对于初始状态）

• 二维空间：右移：0 下移：0
• 三维空间：绕x轴旋转0度 绕y轴旋转360度

transform: translate(0, 0) rotateX(0) rotateY(360deg)

第四帧 过渡至 第五帧 效果图如下

在这里插入图片描述

综上 动画代码为：

animation: loading 2s linear infinite;

@keyframes loading {
  0% {
    transform: translate(0, 0) rotateX(0) rotateY(0)
  }
  25% {
    transform: translate(100%, 0) rotateX(0) rotateY(180deg)
  }
  50% {
    transform: translate(100%, 100%) rotateX(-180deg) rotateY(180deg)
  }
  75% {
    transform: translate(0, 100%) rotateX(-180deg) rotateY(360deg)
  }
  100% {
    transform: translate(0, 0) rotateX(0) rotateY(360deg)
  }
}

最终效果图如下

在这里插入图片描述