CSS粘性loading加载动画

一款CSS粘性loading加载动画，4个白色的圆点，会左右来回运动，最左或最右的位置会粘性结合在一起，然后又分开移动到反方向位置，如此循环下去。

分类：html5 > SVG 难易：初级

查看演示下载资源下载积分： 20 积分

关注公众号，免费赠送安装视频教程、环境和学习视频，后面会不断更新。

页面的head部分，需引入页面的样式文件，代码如下：

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分，用了svg和多个div容器来实现加载元素的显示，代码如下：

<svg class="filter" version="1.1">
<defs>
  <filter id="gooeyness">
    <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
    <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -10" result="gooeyness" />
    <feComposite in="SourceGraphic" in2="gooeyness" operator="atop" />
  </filter>
</defs>
</svg>
<div class="dots">
  <div class="dot mainDot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>