Cara Membuat Animasi Bubble Menu

Cara Membuat Animasi Bubble Menu - Kita tahu saat ini CSS telah mendukung animasi yang bisa diterapkan didalam website, didalamnya terdapat properti - properti yang bisa kita manfaatkan untuk mendukung animasi dan efek. Misalnya nya saja, transisi dan juga efek - efek lainnya yang juga bisa kita kominasikan menjadi sebuah animasi yang menarik. Nah, pada kesempatan kali ini saya akan bagikan tutorial sederhana mengenai animasi menggunakan CSS yakni bagaimana Cara Membuat Animasi Bubble Menu. Pasti kalian sudah tau bubble (gelembung) yah ? Berikut akan saya praktekan Cara Membuat Animasi Bubble Menu.

Langkah 1 : Cara Membuat Animasi Bubble Menu

Baiklah, kita mulai dengan langkah pertama yaitu membuat file index.html terlebih dahulu dan membuat struktur HTML sederhana untuk tampilan menu, untuk itu silahkan ketikan sintak HTML sederhana berikut ini.

<body>
    <nav>
      <ul>
        <li>
          home
          <span></span><span></span><span></span><span></span>
        </li>
        <li>
          products
          <span></span><span></span><span></span><span></span>
        </li>
        <li>
          services
          <span></span><span></span><span></span><span></span>
        </li>
        <li>
          contact
          <span></span><span></span><span></span><span></span>
        </li>
      </ul>
    </nav>
</body>

Langkah 2 : Cara Membuat Animasi Bubble Menu

Langkah selanjutnya, setelah membuat struktur menu seperti diatas adalah mendesain tampilan, mengatur layout, warna dan tentunya membuat animasi bubble untuk menu nya, silahkan kalian ketikan sintak CSS untuk membuat animasi bubble berikut ini.

@import url('https://fonts.googleapis.com/css?family=Bree+Serif');
body {
    font-family: 'Bree Serif', serif;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FEF9F5;
}

ul {
    list-style-type: none;
}

ul li {
    color: #E84F60;
    font-size: 16px;
    border: 4px solid #E84F60;
    border-radius: 5px;
    width: 180px;
    padding: 15px 0;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 3px;
    text-align: center;
    position: relative;
    overflow: hidden;
    z-index: 9;
    transition: 0.7s;
    margin: 0 5px;
    float: left;
    cursor: pointer;
    display: block;
}

ul li span {
    position: absolute;
    width: 45px;
    height: 45px;
    background-color: #E84F60;
    transform: translateY(150%);
    border-radius: 50%;
    right: calc((var(--n) - 1) * 25%);
    transition: 0.5s;
    transition-delay: calc((var(--n) - 1) * 0.1s);
    z-index: -1;
}

ul li:hover { color: #FEF9F5; }

ul li:hover span {
    transform: translateY(0) scale(2);
}

span:nth-child(1) { --n: 1; }

span:nth-child(2) { --n: 2; }

span:nth-child(3) { --n: 3; }

span:nth-child(4) { --n: 4; }

Setelah semua sintak diatas telah diketikan dengan benar, silahkan simpan filenya kemudian buka pada browser masing - masing dan lihat hasinya. Maka ketika kalian arahkan kursor terhadap masing - masing menu akan terlihat animasi bubble yang terjadi.

Baiklah cukup sekian tutorial sederhana mengenai Cara Membuat Animasi Bubble Menu, semoga tutorial ini bisa bermanfaat dan menambah referensi dalam membuat animasi dan efek. Selamat mencoba :)

10 Juli 2018

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat