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.

<body>
  <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 :)

3 September 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat