CSS3filter属性做了一个不错的果冻菜单

我想在这里学习（复制）这个菜单效果。这个dom结构还是很简单的。

div.blobs
    div.circle.main
    div.circle.sub.first
    div.circle.sub.second
    div.circle.sub.last

使用CSS美化：

.blobs {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.circle {
	position: absolute;
	width: 90px;
	height: 90px;
	transform: translate(0, -48px);
	background: hsl(337, 70%, 58%);
	clip-path: circle(42px at center);
}

.circle.main {
    z-index: 2;
}

为了更直接地达到目标效果，先不要动画，而是先写好各个菜单的位置：

.first {
	transform: translate(-100px, -120px);
	background: hsl(307, 70%, 58%);
}

.second {
    transform: translate(0px, -150px);
	background: hsl(277, 70%, 58%);
}

.last {
    transform: translate(100px, -120px);
	background: hsl(247, 70%, 58%);
}

此时出现的效果是这样的：

最后，初始效果是交互的，所以我们用JS添加了一点交互：

const button = document.querySelector(".circle.main");
const circles = document.querySelectorAll(".circle.sub");

button.addEventListener("click", function() {
  circles.forEach(element => {
    element.classList.toggle("show");
  });
});

相应的，CSS也需要改变：

.first {
	transition: transform 0.5s 100ms ease-out;
	background: hsl(307, 70%, 58%);
}

.second {
	transition: transform 0.5s 300ms ease-out;
	background: hsl(277, 70%, 58%);
}

.last {
	transition: transform 0.5s 500ms ease-out;
	background: hsl(247, 70%, 58%);
}

.first.show {
	transform: translate(-100px, -120px);
}

.second.show {
	transform: translate(0px, -150px);
}

.last.show {
	transform: translate(100px, -120px);
}

目前的效果几乎是一样的：

但是它总感觉缺了点什么。粘连效果消失了。我们看一下作者原来的效果：

我快速浏览了一下作者的源代码，发现作者添加了一个类似 .blobs 的过滤器 { filter： url(#goo); }镜像效果，翻翻文档就可以看到：

CSS滤镜属性可以在渲染元素之前提供一些渲染元素的效果，比如模糊、色移等，滤镜是经常用到的。调整图像、背景和边框的渲染。 SVG 滤镜源是指以 XML 文件格式定义的一组 SVG 滤镜效果。它们可以通过 URL 调用，并通过特定过滤器元素 (#element-id) 的锚点指定。

当设置了filter滤镜并添加相应的svg代码后，整个Jerry菜单的效果就被学习（复制）了。效果如下：

附上一篇MDN关于filter文档的文章。