黏糊糊的菜单
先看效果：
再看代码：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>黏糊糊的菜单title>
<style>
body {
padding: 0;
margin: 0;
filter: url('#goo')
}
figure {
margin: 0;
}
.main-container {
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.float-menu-container {
width: 600px;
height: 600px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
border-radius: 50%;
}
.hamburger-icon {
background-color: #4c51bf;
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: 500ms all ease-in-out;
cursor: pointer;
position: relative;
z-index: 99;
overflow: hidden;
}
.hamburger-icon span {
width: 40px;
height: 6px;
background: white;
transition: 500ms all ease-in-out;
border-radius: 10px;
position: relative;
}
.hamburger-icon span::before,
.hamburger-icon span::after {
content: "";
position: absolute;
width: 40px;
height: 6px;
background: white;
transition: 500ms all ease-in-out;
border-radius: 10px;
}
.hamburger-icon span::before {
transform: translateY(-16px);
}
.hamburger-icon span::after {
transform: translateY(16px);
}
.hamburger-icon.active span {
transform: translateX(-50px);
background-color: transparent;
}
.hamburger-icon.active span::before {
transform: rotate(45deg) translate(35px, -35px);
}
.hamburger-icon.active span::after {
transform: rotate(-45deg) translate(35px, 35px);
}
.nav-container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.nav {
position: relative;
}
.nav-item {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: 700ms all;
}
.clicked .nav-item:nth-child(1) {
position: absolute;
left: 0;
right: -48px;
transform: translate(-24px, -150px);
transition: 1100ms all;
}
.clicked .nav-item:nth-child(2) {
position: absolute;
left: 0;
right: -48px;
transform: translate(-154px, -100px);
transition: 1200ms all;
}
.clicked .nav-item:nth-child(3) {
position: absolute;
left: 0;
right: -48px;
transform: translate(-138px, 5px);
transition: 1300ms all;
}
.clicked .nav-item:nth-child(4) {
position: absolute;
left: 0;
right: -48px;
transform: translate(-184px, 110px);
transition: 1400ms all;
}
.clicked .nav-item:nth-child(5) {
position: absolute;
left: 0;
right: -48px;
transform: translate(-54px, 80px);
transition: 1500ms all;
}
.clicked .nav-item:nth-child(6) {
position: absolute;
left: 0;
right: -48px;
transform: translate(66px, 100px);
transition: 1600ms all;
}
.clicked .nav-item:nth-child(7) {
position: absolute;
left: 0;
right: -48px;
transform: translate(130px, 20px);
transition: 1700ms all;
}
.clicked .nav-item:nth-child(8) {
position: absolute;
left: 0;
right: -48px;
transform: translate(86px, -90px);
transition: 1800ms all;
}
.nav-item figure {
width: 50px;
height: 50px;
background-color: #667eea;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
/* box-shadow: rgba(0, 0, 0, 0.25) 0px 0.0625em 0.0625em,
rgba(0, 0, 0, 0.25) 0px 0.125em 0.5em,
rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; */
cursor: pointer;
}
.nav-item:nth-child(1) figure {
animation: float 5s ease-in-out infinite;
}
.nav-item:nth-child(2) figure {
animation: float 4s ease-in-out infinite;
}
.nav-item:nth-child(3) figure {
animation: float 3s ease-in-out infinite;
}
.nav-item:nth-child(4) figure {
animation: float 4s ease-in-out infinite;
}
.nav-item:nth-child(5) figure {
animation: float 5s ease-in-out infinite;
}
.nav-item:nth-child(6) figure {
animation: float 4s ease-in-out infinite;
}
.nav-item:nth-child(7) figure {
animation: float 3s ease-in-out infinite;
}
.nav-item:nth-child(8) figure {
animation: float 4s ease-in-out infinite;
}
.nav-item figure svg {
width: 32px;
height: 32px;
}
.nav-item figure:hover{
background-color: #a3bffa;
border-color: white;
}
.nav-item figure:hover svg{
fill: #4c51bf;
}
@keyframes float {
0% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
50% {
box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
transform: translatey(-15px);
}
100% {
box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
transform: translatey(0px);
}
}
style>
head>
<body>
<div class="main-container">
<div class="float-menu-container">
<div id="hamburger" class="hamburger-icon" onclick="toggleActiveIcon()">
<span>span>
div>
<div id="nav-container" class="nav-container">
<div class="nav">
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="white">
<path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z" />
svg>
figure>
div>
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
<path d="M2 5a2 2 0 012-2h7a2 2 0 012 2v4a2 2 0 01-2 2H9l-3 3v-3H4a2 2 0 01-2-2V5z" />
<path d="M15 7v2a4 4 0 01-4 4H9.828l-1.766 1.767c.28.149.599.233.938.233h2l3 3v-3h2a2 2 0 002-2V9a2 2 0 00-2-2h-1z" />
svg>
figure>
div>
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
<path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z" />
svg>
figure>
div>
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
svg>
figure>
div>
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
<path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
svg>
figure>
div>
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
<path d="M5.5 16a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.977A4.5 4.5 0 1113.5 16h-8z" />
svg>
figure>
div>
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM7 9a1 1 0 100-2 1 1 0 000 2zm7-1a1 1 0 11-2 0 1 1 0 012 0zm-.464 5.535a1 1 0 10-1.415-1.414 3 3 0 01-4.242 0 1 1 0 00-1.415 1.414 5 5 0 007.072 0z" clip-rule="evenodd" />
svg>
figure>
div>
<div class="nav-item">
<figure>
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="white">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" />
svg>
figure>
div>
div>
div>
div>
div>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="shadowed-goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="16" />
<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" />
<feGaussianBlur in="goo" stdDeviation="3" result="shadow" />
<feColorMatrix in="shadow" mode="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 -0.2" result="shadow" />
<feOffset in="shadow" dx="1" dy="1" result="shadow" />
<feComposite in2="shadow" in="goo" result="goo" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
filter>
<filter id="goo">
<feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="10" />
<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" />
<feComposite in2="goo" in="SourceGraphic" result="mix" />
filter>
defs>
svg>
body>
<script>
const hamburgerIcon = document.getElementById("hamburger");
const navContainer = document.getElementById("nav-container")
function toggleActiveIcon() {
hamburgerIcon.classList.toggle("active");
navContainer.classList.toggle("clicked")
}
script>
html>