HTML
CSS
<!DOCTYPE html>
<html>
<head>
<title>Navbar</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<nav>
<div class="logo">
<h3>F<span>as</span>T<span>Unlock</span></h3>
</div>
<ul>
<li><a href="#">Home <div class="liquid"></div></a></li>
<li><a href="#">Service <div class="liquid"></div></a></li>
<li><a href="#">About <div class="liquid"></div></a></li>
<li><a href="#">Contact <div class="liquid"></div></a></li>
</ul>
</nav>
</section>
</body>
</html>
CSS
body{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
background: linear-gradient(to top, #342455, #642645, #342455);
}
section{
background: rgba(0,0,0,0.4);
height: 100vh;
}
.logo{
position: absolute;
top: -10px;
left: 30px;
}
h3{
font-size: 1.9em;
color: #fff;
cursor: pointer;
text-shadow: 0 5px 5px rgba(0,0,0,0.5);
}
span{
font-size: 24px;
display: inline-block;
width: 0px;
overflow: hidden;
vertical-align: middle;
transition: 1s ease-in-out;
}
h3:hover span:nth-child(1){
width: 40px;
overflow: hidden;
}
h3:hover span:nth-child(2){
width: 100px;
overflow: hidden;
}
nav{
width: 100%;
height: 90px;
background: rgba(0, 9, 2, 0.1);
}
nav ul{
float: right;
margin-right: 150px;
}
nav ul li{
position: relative;
display: inline-block;
padding: 15px;
border-radius: 5px;
overflow: hidden;
}
nav ul li a{
color: #fff;
font-size: 20px;
padding: 15px 5px;
text-decoration: none;
transition: .5s;
}
.liquid {
position: absolute;
top: 60px;
left: 0;
width: 120px;
height: 60px;
background: #4973ff;
transition: .5s;
z-index: -1;
}
.liquid::after, .liquid::before {
position: absolute;
content: '';
top: -30px;
left: 50%;
width: 200px;
height: 200px;
transform: translate(-50%, -75%);
}
.liquid::before {
background: #000;
border-radius: 45%;
animation: animate 5s linear infinite;
}
.liquid::after {
background: rgba(0, 0, 0, 0.4);
border-radius: 40%;
animation: animate 10s linear infinite;
}
li:hover .liquid{
top:0;
transition: 1.5s;
}
@keyframes animate {
0% {
transform: translate(-50%, -75%) rotate(0deg);
}
100% {
transform: translate(-50%, -75%) rotate(360deg);
}
}
