Cara Membuat Animasi Underline pada Menu
Cara Membuat Animasi Underline pada Menu - Adanya animasi pada elemen dalam sebuah website akan membuat tampilan semakin menarik dan lebih hidup dan sekarang ini hampir disetiap halaman website menampilkan animasi - animasi yang sangat menarik. Untuk membuat animasi tersebut ada banyak cara, bisa dengan CSS yang paling sederhana, dan dengan jQuery. Nah, pada kesempatan ini saya akan membagikan tutorial animasi sederhana dengan CSS yaitu bagaimana Cara Membuat Animasi Underline pada Menu. Untuk lebih jelas bagaimana cara membuatnya, simak langkah - langkahnya berikut ini.
Baik kita mulai dengan langkah pertama yaitu membuat struktur untuk menu, silahkan buat file index.html kemudian ketikan kode HTML berikut untuk membuat menu.
<div class="wrapper">
<nav>
<ul>
<li><a href="#" class="line"><span>Home</span></a></li>
<li><a href="#" class="line"><span>About</span></a></li>
<li><a href="#" class="line"><span>Service</span></a></li>
<li><a href="#" class="line"><span>Contact</span></a></li>
</ul>
</nav>
</div>
</body>
Setelah membuat struktur menu seperti diatas, langkah selanjutnya mengatur layout dan membuat animasi underline menu dengan kode CSS berikut ini.
padding: 0;
margin: 0;
color: #D6AD60;
}
.wrapper {
background-color: #122620;
display: flex;
justify-content: center;
align-items: center;
}
ul {
list-style: none;
padding: 0;
display: flex;
flex-flow: row wrap;
}
li {
padding: 1rem 2rem;
}
a {
text-decoration: none;
position: relative;
color: black;
font-size: 2rem;
font-weight: 900;
padding: 8px 0;
}
.line::after {
content: "";
border-bottom: solid 4px #B68D40;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.25s;
}
.line:hover::after {
transform-origin: left;
transform: scaleX(1);
}
@keyframes line {
from {
transform: scaleX(0);
}
to {
transform: scaleX(1);
}
}
Kalau sudah semua kode HTML dan CSS telah diketikan semua, langkah terakhir pastikan simpan kembali file index.html nya kemudian bisa dibuka dibrowser masing - masing untuk melihat hasil akhirnya.
Baiklah, saya cukupkan tutorial sederhana CSS mengenai bagaimana Cara Membuat Animasi Underline pada Menu, semoga bermanfaat dan bisa menjadi referensi dalam membuat menu. Selamat mencoba dan sampai jumpa ditutorial selanjutnya :)
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
