CSS打造抖音视频加载Loading

前端

2023-10-05 04:24:20

抖音加载效果的幕后揭秘

你是否曾好奇抖音视频加载时出现的有趣动画是如何实现的？让我们深入探索一下它的本质以及如何使用 CSS 创建它。

抖音加载效果的本质

抖音加载动画由两个相互纠缠的小球组成，每个小球的颜色和形状各异。它们以一种动感十足的方式旋转和移动，不仅赏心悦目，而且有效地传达视频正在加载的信息。

用 CSS 实现抖音加载效果

要使用 CSS 实现这个效果，我们需要用到关键帧动画和变换属性。关键帧动画允许我们控制动画的各个阶段，而变换属性则可以让我们旋转、缩放和移动动画中的元素。

具体步骤

创建小球元素： 创建两个 div 元素，并为其添加 CSS 样式，使其呈现出两个小球的外观。
添加关键帧动画： 为这两个 div 元素添加关键帧动画，使它们按照一定的路径运动。
纠缠小球： 使用变换属性，让这两个小球相互纠缠。
无限循环： 为动画添加一个无限循环的属性，以确保它能够一直播放。

示例代码

/* 创建小球 */
.ball1 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: red;
}

.ball2 {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: blue;
}

/* 定义关键帧动画 */
@keyframes move-ball1 {
  0% {
    transform: translate(0, 0);
  }
  25% {
    transform: translate(100px, 0);
  }
  50% {
    transform: translate(100px, 100px);
  }
  75% {
    transform: translate(0, 100px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes move-ball2 {
  0% {
    transform: translate(0, 100px);
  }
  25% {
    transform: translate(100px, 100px);
  }
  50% {
    transform: translate(100px, 0);
  }
  75% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, 100px);
  }
}

/* 添加动画效果 */
.ball1 {
  animation: move-ball1 2s infinite;
}

.ball2 {
  animation: move-ball2 2s infinite;
}