Start with the cool Jelly menu and the CSS3 Filter property

Today noon brush digging gold boiling point, see a Jerry Menu, looking good, like learning (copy) xi (attack). See the effect picture below:

Here I want to learn (copy) (copy) is the menu effect, the DOM structure is very simple.

div.blobs
    div.circle.main
    div.circle.sub.first
    div.circle.sub.second
    div.circle.sub.lastCopy the code

Use CSS to beautify:

.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;
}Copy the code

In order to achieve the target effect more directly, do not do animation first, first write the position of each menu:

.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%);
}Copy the code

The effect should look something like this:

The initial effect is interactive, so we use JS with a little bit of interaction:

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

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

The CSS changes accordingly:

.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); }Copy the code

The effect is almost complete:

But the total feeling is something bad, the adhesion effect is gone, look at the effect of the original author:

Blobs {filter: url(#goo); }}}}}

The CSS filter properties provide effects such as blur, color shift, and so on for rendering elements before rendering them. Filters are often used to adjust the rendering of images, backgrounds, and borders. SVG Filter Sources is a set of SVG Filter effects defined in XML file format that can be imported through a URL and specified by an anchor point (#element-id).

After setting the filter filter and adding the corresponding SVG code, the entire Jerry Menu effect is copied (copied). The effect is as follows:

Attached here is the document about filter on MDN.