web前端如何实现这种黏糊糊的效果呢?
gooey effect
一个有趣的思路是利用 svg 的 filter。
它需要两个基本的filter,一个是高斯模糊,另一个是提升Alpha 通道对比度的过滤器。
基本思路如下:
高斯模糊会在目标周边由近及远的生成透明度逐渐变大的像素。
两个目标接近粘连的区域,由于像素的叠加,Alpha 值会相加。与非粘黏区域相比,粘黏区域的Alpha 值会变大。利用这个差值,我们设计第二个滤波器,进一步放大这个差值——让alpha值小的就彻底透明,alpha值大的就彻底不透明 —— 这就实现了粘黏效果。













网友评论