HTML元素粘滞融合效果

.target {
    filter: url("#goo");
}
.ball {
    width: 150px; height: 150px;
    border-radius: 50%;
    background-color: #beceeb;
    position: absolute;
}
HTML代码：
<svg width="0" height="0">
  <defs>
    <filter id="goo">
      <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 19 -9" result="goo" />
      <feComposite in="SourceGraphic" in2="goo" operator="atop"/>
    </filter>
  </defs>
</svg>

<div class="target">
    <i id="ball1" class="ball"></i>
    <i id="ball2" class="ball"></i>
</div>

 

转载于:https://www.cnblogs.com/love314159/p/9183641.html