粘连效果实现

该文章发布于 ,归类于 HTML/CSS

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

比如如下图片中的效果

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

MDN上关于filter介绍的比较全面,这里只用到三个属性feGaussianBlurfeColorMatrixfeBlend

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.

相关文章