如何仅用CSS打造令人惊叹的粘性气泡动态效果？

本文共计2334个文字，预计阅读时间需要10分钟。

最近在CodePen上看到一个很有趣的效果：+ 这个效果的核心理念在于一种独特的特殊混合效果。其源代码在CodePen Demo -- Goey footer，作者主要使用SVG滤镜完成该效果。

最近，在 CodePen 上看到这样一个非常有意思的效果：

这个效果的核心难点在于气泡的一种特殊融合效果。

其源代码在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 滤镜完成的该效果，感兴趣的可以戳源码看看。

其中，要想灵活运用 SVG 中的 feGaussianBlur 滤镜还是需要有非常强大的 SVG 知识储备的。那么，仅仅使用 CSS 能否实现该效果呢？

嘿嘿，强大的 CSS 当然是可以的。本文，就将带领大家一步步使用纯 CSS，完成上述效果。

借助 SASS 完成大致效果

首先，如果上述效果没有气泡的融合效果，可能就仅仅是这样：

要制作这样一个效果还是比较简单的，只是代码会比较多，我们借助 SASS 预处理器即可。