HTML CODE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Illusionistic Navbar</title>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<nav class="navbar">
<div class="nav-item">
<i class="fas fa-home"></i>
</div>
<div class="nav-item">
<i class="fas fa-user"></i>
</div>
<div class="nav-item">
<i class="fas fa-envelope"></i>
</div>
<div class="nav-item">
<i class="fas fa-phone"></i>
</div>
<div class="nav-item">
<i class="fas fa-info-circle"></i>
</div>
</nav>
</body>
</html>
CSS CODE
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: "Courier New", Courier, monospace;
overflow: hidden;
background: black;
color: white;
position: relative;
}
/* Binary code animation */
body::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.5));
z-index: 0;
pointer-events: none;
mask: repeating-linear-gradient(
0deg,
transparent 0%,
transparent 20%,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 40%
);
animation: binaryMove 5s linear infinite;
}
@keyframes binaryMove {
0% {
background-position: 0 0;
}
100% {
background-position: 0 100%;
}
}
.navbar {
display: flex;
gap: 30px;
position: relative;
z-index: 1;
}
.nav-item {
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 50%;
border: 3px solid transparent;
backdrop-filter: blur(10px);
transition: transform 0.5s, background 0.5s;
cursor: pointer;
position: relative;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}
.nav-item i {
font-size: 28px;
color: white;
transition: transform 0.5s, text-shadow 0.5s;
}
.nav-item:hover {
transform: rotate(360deg) scale(1.1);
background: linear-gradient(135deg, #ff00ff, #00ffff);
box-shadow: 0 0 30px #ff00ff, 0 0 60px #00ffff;
}
.nav-item:hover i {
transform: scale(1.3);
text-shadow: 0 0 15px #ff00ff, 0 0 30px #00ffff;
}
.nav-item::before {
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
background: linear-gradient(135deg, #ff00ff, #00ffff);
mask: repeating-conic-gradient(
transparent 0deg,
transparent 20deg,
rgba(255, 255, 255, 0.5) 20deg,
rgba(255, 255, 255, 0.5) 40deg
);
-webkit-mask-composite: destination-out;
mask-composite: exclude;
opacity: 0;
transition: opacity 0.5s, transform 0.5s;
}
.nav-item:hover::before {
opacity: 1;
transform: rotate(180deg) scale(1.2);
}
Top comments (0)