<div class="container">
<div class="phone">
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__item">
<a class="navigation__link active" href="#home">
<i class="navigation__icon" data-feather="home"></i>
<span class="navigation__text">HOME</span>
</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#search">
<i class="navigation__icon" data-feather="search"></i>
<span class="navigation__text">SEARCH</span>
</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#categories">
<i class="navigation__icon" data-feather="layers"></i>
<span class="navigation__text">CATEGORIES</span>
</a>
</li>
<li class="navigation__item">
<a class="navigation__link" href="#likes">
<i class="navigation__icon" data-feather="heart"></i>
<span class="navigation__text">LIKES</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
html, body {
height: 100%;
min-height: 100%;
font-family: 'Quicksand', sans-serif;
}
body {
background-color: #e7eaef;
}
*, *::after, *::before {
box-sizing: border-box;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
background-color: #e7eaef;
background-image: linear-gradient(145deg, #e7eaef 0%, #ffe7d1 100%);
&::before {
content: '';
position: fixed;
width: 700px;
height: 1500px;
border-radius: 50000px;
background-color: #F6C89F;
transform: rotate(-45deg) translate(40%, -55%);
}
}
.phone {
width: 400px;
height: 100vh;
border-radius: 50px;
border: 7px solid white;
transform: translateY(-40%);
background-color: rgba(white, .3);
backdrop-filter: blur(8px);
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
padding: 10px;
}
.navigation {
width: 100%;
background-color: white;
border-radius: 50px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
&__list {
list-style: none;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
margin: 0;
padding: 0;
}
&__item {
perspective: 100px
}
&__link {
font-size: 12px;
text-decoration: none;
color: #c3cad6;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 70px;
padding: 20px 30px;
overflow: hidden;
position: relative;
outline: none;
&::before {
content: '';
width: 4px;
height: 4px;
border-radius: 15px;
background-color: #F6C89F;
position: absolute;
transform: translateY(60px) scale(.4);
transition: all .35s cubic-bezier(0, 0.51, 0, 0.99);
opacity: 0;
}
}
&__icon {
transition: all .35s ease;
will-change: opacity, transform, background-color;
}
&__text {
position: absolute;
transform: translateY(60px) skewY(-20deg);
transform-origin: left bottom;
color: #4b8e8d;
font-weight: 700;
opacity: 0;
transition: all .35s ease;
will-change: opacity, transform, background-color;
}
&__link.active &__icon {
transform: translateY(-60px) rotateX(90deg) scale(.4) skewY(-30deg);
opacity: 0;
}
&__link.active &__text {
opacity: 1;
transform: translateY(-3px) skewY(0deg);
}
&__link.active::before {
transform: translateY(12px) scale(1);
transition: all .35s cubic-bezier(0, 0.51, 0, 0.99) 0.2s;
opacity: 1;
}
}
@keyframes dotAnime {
0% {
transform: translateY(60px) scale(.4);
opacity: 0
}
75% {
transform: translateY(-3px) scale(1);
opacity: 1;
}
to {
transform: translateY(12px);
opacity: 1;
}
}
@keyframes textAnime {
from {
transform-origin: right center;
transform: skewY(0) translateY(0);
}
25% {
transform: skewY(0) translateY(0);
}
60% {
transform: skewY(-12deg) translateY(-22px);
}
to {
transform: skewY(0) translateY(-3px);
}
}
View Compiled
feather.replace()
const links = document.querySelectorAll('.navigation__link')
links.forEach(link => {
link.addEventListener('click', (e) => {
e.preventDefault();
if(!link.classList.contains('active')) {
const active = document.querySelector('.navigation__link.active');
if(active !== null) {
active.classList.remove('active');
}
link.classList.add('active');
}
})
})
View Compiled