粘连效果实现

举个例子，如果有两个水滴，当它们靠近的时候，会相互粘连在一起，最后形成一个水滴。那么，如果要实现一个这样的粘连效果，该如何做呢？

比如如下图片中的效果

此时，可以使用SVG中的filter来实现这样一个效果。

MDN上关于filter介绍的比较全面，这里只用到三个属性feGaussianBlur、feColorMatrix、feBlend。

feGaussianBlur用来添加高斯模糊，feColorMatrix用来处理RGBA颜色矩阵，feBlend用来混合对象。

<style>
  .wrapper {
    filter: url('#sticky')
  }
  .box {
    position: absolute;
    width: 60px;
    height: 60px;
    clip-path: circle(30px at center);
    background-color: seagreen;
  }
  .box.right {
    margin-left: 60px;
  }
</style>
<div class="wrapper">
  <div class="box left"></div>
  <div class="box right"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="sticky">
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur"></feGaussianBlur>
      <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -7"
                     result="colorBlur"></feColorMatrix>
      <feBlend in="SourceGraphic" in2="colorBlur"></feBlend>
    </filter>
  </defs>
</svg>

你可以在这里查看效果

See the Pen yxxMMq by Leevare (@leevare) on CodePen.