前言
周末了，也没有闲下来，这次给大家带来一个简单的冒泡加载特效。冒泡排序大家都听过，冒泡加载可能是第一次见吧。先给大伙看个静态图。
效果预览
然后在码上掘金中看看它的动态效果。
看完了基本效果，我们现在来实现一下它吧，关于它的实现整体来说并不难，跟着我进入到这个特效的开发中吧。
HTML结构
首先我们来搭建一下基本的HTML结构，相关代码如下。
<div class="container">
<div class="box">
<div class="circle"></div>
<div class="circle"></div>
</div>
<h2>Loading...</h2>
</div>
这是一段简单的HTML代码，用于显示一个加载动画。主要由一个容器元素container组成，在该元素中包含一个盒子元素box和一个标题元素<h2>。
盒子元素内部有两个圆圈元素circle，这两个圆圈元素可以用来表示加载的进度。但是在我们这里实现的效果中只是静态地显示了两个圆圈。
CSS样式
完成了基础结构搭建，现在来为这些元素添加样式。首先给容器元素加上CSS样式，相关代码如下。
.container{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.container .box{
position: relative;
width: 200px;
height: 200px;
animation: rotatBox 10s linear infinite;
}
container容器使用flex布局，将子元素水平和垂直居中，并按照垂直方向排列。其中包含的box元素的宽度和高度都为200px。这里最主要的是在box元素中设置了一个名为rotatBox的动画，持续时间为10秒，动画效果为线性变化，且无限循环播放。紧接着我们来看看这个动画是如何编写的。
@keyframes rotatBox {
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}
在这个关键帧动画中，使用了两个关键帧，分别是0% 和100%。0% 代表动画开始时的状态，100% 代表动画结束时的状态。
在0% 关键帧中，通过transform属性设置元素的旋转角度为0度，表示动画开始时元素不发生旋转。在100% 关键帧中，通过transform属性设置元素的旋转角度为360度，表示动画结束时元素以顺时针方向旋转360度，即一周。
这样，当应用该关键帧动画到一个元素时，元素会从初始状态开始，逐渐旋转到360度的状态，形成一个旋转的动画效果。
然后接下来在circle元素中也定义了一个动画。动画的持续时间为5秒，采用线性的动画曲线，并且无限循环播放。
.container .box .circle{
......
animation: animate 5s linear infinite;
}
@keyframes animate {
0%{
transform: scale(1);
transform-origin: left;
}
50%{
transform: scale(0);
transform-origin: left;
}
50.01%{
transform: scale(0);
transform-origin: right;
}
100%{
transform: scale(1);
transform-origin: right;
}
}
在这个关键帧动画中，我们定义了四个关键帧：
0%关键帧：将元素的缩放比例设置为1，缩放原点设置为左侧。50%关键帧：将元素的缩放比例设置为0，缩放原点设置为左侧。50.01%关键帧：将元素的缩放比例保持为0，但是缩放原点设置为右侧。这个关键帧的作用是在动画的中间位置瞬间改变缩放原点。100%关键帧：将元素的缩放比例恢复为1，缩放原点设置为右侧。
这样，当应用这个关键帧动画到一个元素时，该元素会从正常大小开始，逐渐缩小到消失，然后在动画的中间位置瞬间改变缩放原点，最后再逐渐恢复到正常大小。
完成这些，就可以实现上面看到的冒泡加载效果了。
总结
以上就是冒泡加载整个效果的实现过程了，整体来说比较简单，完整代码可以在码上掘金中查看。大家可以去把代码拷贝下来亲自试一试效果，相信会有不一样的发现。
