Animation Bottom Navigation Bar | Animation nav bar
# To create aAnimation Bottom Navigation Bar | Animation nav bar Select Menu using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create aAnimation Bottom Navigation Bar | Animation nav bar Select Menu and apply a tilt effect to it. Here's an example:
1. First, create a container element in HTML for the Bottom Navigation Bar:
<div class="tabs">
<!-- TAB 1 -->
<input type="radio" name="tab" id="tab-01" checked="">
<label for="tab-01">
<svg>
<use xlink:href="#icon-01" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
<!-- TAB 2 -->
<input type="radio" name="tab" id="tab-02">
<label for="tab-02">
<svg>
<use xlink:href="#icon-02" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
<!-- TAB 3 -->
<input type="radio" name="tab" id="tab-03">
<label for="tab-03">
<svg>
<use xlink:href="#icon-03" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
<!-- TAB 4 -->
<input type="radio" name="tab" id="tab-04">
<label for="tab-04">
<svg>
<use xlink:href="#icon-04" class="icon"></use>
</svg>
<div class="wave"></div>
</label>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-01">
<path
d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47">
</path>
<line x1="16" y1="10" x2="18" y2="10"></line>
<line x1="8" y1="10" x2="12" y2="10"></line>
<line x1="8" y1="15" x2="18" y2="15"></line>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-02">
<path
d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1">
</path>
<polygon points="15 14.33 11 17 11 11.67 15 9 15 14.33"></polygon>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-03">
<path
d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1">
</path>
<path d="M15,23a2,2,0,0,1-4,0"></path>
<path d="M16,5.51A6.53,6.53,0,0,1,19.65,9.4"></path>
</symbol>
<symbol xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" id="icon-04">
<path
d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1">
</path>
<path d="M18,18.26a8,8,0,0,1-10.09-.1"></path>
</symbol>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" height="0" width="0">
<clippath id="path-icon-01">
<path
d="M13.93,1H20.8A4.21,4.21,0,0,1,25,5.2V20.8A4.21,4.21,0,0,1,20.8,25H5.2A4.21,4.21,0,0,1,1,20.8V5.2A4.21,4.21,0,0,1,5.2,1h.47">
</path>
</clippath>
<clippath id="path-icon-02">
<path
d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1">
</path>
</clippath>
<clippath id="path-icon-03">
<path
d="M7.91,2.08a11.15,11.15,0,0,0-5.73,9.81v6a7.83,7.83,0,0,1-1,2.92A1.47,1.47,0,0,0,2.43,23H23.57a1.47,1.47,0,0,0,1.26-2.16,7.83,7.83,0,0,1-1-2.92v-6A11.06,11.06,0,0,0,15.18,1">
</path>
</clippath>
<clippath id="path-icon-04">
<path
d="M17,1a12.33,12.33,0,0,1,8,11.65A12.18,12.18,0,0,1,13,25,12.18,12.18,0,0,1,1,12.65,12.33,12.33,0,0,1,9,1">
</path>
</clippath>
</svg>
2. Next, add some CSS to create a Bottom Navigation Bar and position the container in the center:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
::-webkit-scrollbar {
display: none;
}
.tabs {
--background: #FFFFFF;
--light-grey: #C6CFD9;
--wave-color: #dd2a2a;
--width: 300px;
--height: 75px;
--border-radius: 9px;
background: var(--background);
width: var(--width);
height: var(--height);
padding: 0;
position: relative;
border-radius: var(--border-radius);
box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
display: flex;
justify-content: space-around;
align-items: center;
padding: 0 15px;
box-sizing: border-box;
overflow: hidden;
}
.tabs label {
width: 26px;
height: 26px;
cursor: pointer;
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
transform-origin: center bottom;
}
.tabs label::before {
content: "";
height: 4px;
width: 4px;
border-radius: 0% 100% 50% 50%/0% 50% 50% 100%;
transform: scale(1, 1) rotate(45deg);
transform-origin: 50% 50%;
background: var(--wave-color);
display: block;
position: absolute;
top: -30px;
}
.tabs label svg {
width: 100%;
height: 100%;
position: relative;
z-index: 1;
}
.tabs label svg .icon {
fill: none;
stroke: var(--light-grey);
stroke-dashoffset: 98;
stroke-width: 2px;
stroke-linecap: round;
stroke-linejoin: round;
transition: stroke 0.15s linear 0.3s;
}
.tabs label .wave {
height: 26px;
width: 26px;
position: absolute;
overflow: hidden;
}
.tabs label .wave::before,
.tabs label .wave::after {
content: "";
position: absolute;
left: 0;
bottom: -12px;
right: 0;
background-repeat: repeat;
height: 14px;
width: 48px;
background-size: 12px 12px;
-webkit-animation: wave-animation 3s linear infinite;
animation: wave-animation 3s linear infinite;
transition: bottom 0.15s ease-out 0.35s;
}
.tabs label .wave::before {
background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
-webkit-animation-duration: 2s;
animation-duration: 2s;
opacity: 0.5;
}
.tabs label .wave::after {
background-image: radial-gradient(circle at 6px -3px, transparent 6px, var(--wave-color) 6px);
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
.tabs label:nth-of-type(1) .wave {
-webkit-clip-path: url(#path-icon-01);
clip-path: url(#path-icon-01);
}
.tabs label:nth-of-type(2) .wave {
-webkit-clip-path: url(#path-icon-02);
clip-path: url(#path-icon-02);
}
.tabs label:nth-of-type(3) .wave {
-webkit-clip-path: url(#path-icon-03);
clip-path: url(#path-icon-03);
}
.tabs label:nth-of-type(4) .wave {
-webkit-clip-path: url(#path-icon-04);
clip-path: url(#path-icon-04);
}
.tabs input {
display: none;
}
.tabs input:checked+label {
-webkit-animation: wiggle-animation 1s ease 0.3s;
animation: wiggle-animation 1s ease 0.3s;
}
.tabs input:checked+label::before {
-webkit-animation: drop-animation 0.35s ease-in both;
animation: drop-animation 0.35s ease-in both;
}
.tabs input:checked+label svg .icon {
stroke: #4B4B4B;
}
.tabs input:checked+label .wave:before {
bottom: 0;
}
.tabs input:checked+label .wave:after {
bottom: -4px;
}
@-webkit-keyframes wiggle-animation {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-7deg);
}
60% {
transform: rotate(7deg);
}
90% {
transform: rotate(-3deg);
}
100% {
transform: rotate(0deg);
}
}
@keyframes wiggle-animation {
0% {
transform: rotate(0deg);
}
20% {
transform: rotate(-7deg);
}
60% {
transform: rotate(7deg);
}
90% {
transform: rotate(-3deg);
}
100% {
transform: rotate(0deg);
}
}
@-webkit-keyframes wave-animation {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
@keyframes wave-animation {
0% {
transform: translateX(0%);
}
100% {
transform: translateX(-50%);
}
}
@-webkit-keyframes drop-animation {
70% {
transform: scale(0.8, 3) rotate(45deg);
top: -7px;
}
100% {
transform: scale(1.5, 0.5) rotate(45deg);
top: 19px;
}
}
@keyframes drop-animation {
70% {
transform: scale(0.8, 3) rotate(45deg);
top: -7px;
}
100% {
transform: scale(1.5, 0.5) rotate(45deg);
top: 19px;
}
}
body {
background: rgb(235, 235, 235);
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
body .socials {
position: fixed;
display: block;
left: 20px;
bottom: 20px;
}
body .socials>a {
display: block;
width: 30px;
opacity: 0.2;
transform: scale(var(--scale, 0.8));
transition: transform 0.3s cubic-bezier(0.38, -0.12, 0.24, 1.91);
}
body .socials>a:hover {
--scale: 1;
}
#Bottom Navigation Bar in HTML, CSS & JS For Full Code 👇
* Hello buddy, I hope you are doing great and creating awesome projects. Today I have brought a useful project for you. In this project, you will learn to create Bottom Navigation Bar html css |Bottom Navigation Bar in css` using HTML CSS, and JavaScript. Yeah, HTML also provides us a select menu with the dropdown feature, but we will you will learn to make it more beautiful and fascinating.
Post a Comment