粘性小球Loading

这是我参与「掘金日新计划 · 8 月更文挑战」的第21天，点击查看活动详情

动手实现一个黏性小球loading效果。

实现思路

将动画拆解，从效果看的话,主要可以拆分为三个效果:

1. 小圆的移动绘制
2. 大圆和小圆之间的粘性效果
3. 大圆有个抖动效果和大小变化

首先看第一点，3小圆共同运动，将他们划分为一个组，设置动画的时候，单独为这个组设置就可以了，不必再去为每一个小圆去设置了。页面元素代码如下：

<div class="ball-group">
  <div class="ball"></div>
  <div class="ball"></div>
  <div class="ball"></div>
</div>

小圆的移动绘制

小圆的移动可以分为三个阶段：

1. 初始阶段：三个小圆包含在大圆内
2. 右移阶段：小圆运动到最右侧
3. 左移阶段：小圆运动到最左侧

.ball-group {
  position: absolute;
  left: -10px;
  animation: ball-group 6s infinite;
}

@keyframes ball-group {
  0%,
  50%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(60px);
  }
  75% {
    transform: translateX(-60px);
  }
}

大圆的动画很简单就是在小球处于初始点的时候最大，向左或向右移动的时候变小。

效果如图：

小球之间的粘性效果

不知道大家发现没，QQ的未读消息小红点的拖拽消失也用到了这种元素之间的黏性效果。那么用css如何实现这种元素之间的量子纠缠效果呢？

这里有一个小技巧，利用 filter: contrast() 滤镜与 filter: blur() 滤镜。就可以轻松的实现这种效果了。

这两个属性分别的作用是：

1. filter: blur()： 给图像设置高斯模糊效果。
2. filter: contrast()： 调整图像的对比度。

给父容器设置 filter: contrast()给子元素设置filter: blur() 即可实现融合效果，但是这里有一个问题，如果父容器的背景色不是白色，是其它颜色就会产生一圈光晕。效果很不理想。

退而求其次使用白色背景看看效果。

大球的抖动动画

通过改变动画不同阶段球体的大小来模拟大球的抖动效果。

码上掘金：