CSS3+SVG练习：果冻菜单
很酷的一个菜单效果，收藏，可以用作项目
<div class="blobs">
<div class="circle main"></div>
<div class="circle sub first"></div>
<div class="circle sub second"></div>
<div class="circle sub last"></div>
</div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" stdDeviation="5" 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 18 -7" result="goo" />
<feBlend in="SourceGraphic" in2="goo" />
</filter>
</defs>
</svg>
.blobs{
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
font-size: 10px;
filter: url(#goo);
}
.circle{
position: absolute;
width: 9em;
height: 9em;
transform: translate(0, -48px);
background: hsl(337, 70%, 58%);
clip-path: circle(42px at center);
}
.circle.main::before{
position: absolute;
content:'';
width: 35px;
height: 5px;
background: rgb(255, 255, 255);
border-radius: 15px;
top:calc(50% - 2.5px);
left:calc(50% - 17.5px);
}
.circle.main::after{
position: absolute;
content:'';
width: 35px;
height: 5px;
background: rgb(255, 255, 255);
border-radius: 15px;
transform: rotate(90deg);
top:calc(65% - 17.5px);
left:calc(36% - 2.5px);
}
.circle.main{
z-index: 2;
}
.circle.first{
transition: transform 0.5s 100ms ease-out;
background: hsl(307, 70%, 58%);
}
.circle.first.show{
transform: translate(-100px, -120px);
}
.circle.second{
transition: transform 0.5s 300ms ease-out;
background: hsl(277, 70%, 58%);
}
.circle.second.show{
transform: translate(0px, -150px);
}
.circle.last{
transition: transform 0.5s 500ms ease-out;
background: hsl(247, 70%, 58%);
}
.circle.last.show{
transform: translate(100px, -120px);
}
$(document).ready(function() {
$(".main").click(function(){
$("div.sub").each(function(){
$(this).toggleClass("show");
})
})
});
