生活中我们常见，两滴水在靠近时会相互粘连，慢慢地融合到一起，这融合的过程就产生了融滞效果。

那么放到Web页面上，我们该如何实现这种效果呢？像往常一样，先让我们看一下效果图吧。

可以看到，红色小球的边缘有慢慢融合的效果，接下来我们就用代码来实现它。

这里主要运用SVG的过滤器来呈现这种特殊效果。主要用到模糊效果 feGaussianBlur 以及图像处理 feColorMatrix 过滤器。

首先我们看页面结构，做两个红色小球出来，然后svg该怎么去写，html代码如下：

<div class="demo">
  <svg width="0" height="0">
    <defs>
      <filter id="goo">
        <feGaussianBlur in="SourceGraphic" stdDeviation="15" 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 -9" result="goo" />
      </filter>
    </defs>
  </svg>
  <h4>拖动右侧球靠近左侧球</h4>
  <div class="target">
    <i id="ball1" class="ball"></i>
    <i id="ball2" class="ball"></i>
  </div>
</div>

简单的css给页面做一下样式，具体代码如下，核心代码为：

.target {
  filter: url('#goo');
}

为目标元素加上我们设计的滤镜效果。

.demo{
  margin: 100px;
}
svg{
  position: absolute;
}
.target{
  filter: url('#goo');
}
.ball{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #ff0000;
  position: absolute;
}
.ball + .ball{
  margin-left: 200px;
}

接下来，我们简单的用js来实现一下右侧小球的拖拽功能，看代码吧：

var ball2 = document.getElementById('ball2');
ball2.onmousedown = function(e){
  var e = e || event;
  var disX = e.clientX - ball2.offsetLeft;
  var disY = e.clientY - ball2.offsetTop;

  document.onmousemove = function(e){
    var e = e || event;
    // 减200是因为样式中有一个margin-left
    var l = e.clientX - disX - 200;
    var t = e.clientY - disY;
    ball2.style.left = l + 'px';
    ball2.style.top = t + 'px';
  }

  document.onmouseup = function(){
    document.onmousemove = null;
    document.onmouseup = null;
  }
}

完成拖拽功能后，我们就可以拖着右侧的小球慢慢靠近左侧小球，在靠近并接触到左侧小球的时候就会产生融滞效果啦。想看最终效果，来猛戳这里。

相信大家都有各自的一套方法实现这种效果，我们，加油！

Over~拜