元素黏连特效

发表于

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=6655

黏连效果代码

页面任意位置塞入这么一段SVG代码

1
2
3
4
5
6
7
8
9
<svg width="0" height="0" style="position:absolute;">
  <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>

需要黏连元素的父元素css加一句

1
filter: url("#goo");

效果局限

  1. 浏览器兼容问题：ie不支持
    1
    2
    3
    4
    var ua = navigator.userAgent;
    if (/Safari|iPhone/i.test(ua) && /chrome/i.test(ua) == false) {
        document.body.classList.add('nofilter');
    }

CSS:

1
2
3
body:not(.nofilter) .target {
   filter: url("#goo");
}

  1. 该效果只适用于圆形元素

DEMO

a link