Cara Membuat Animasi Bubble Menu

10/07/2018    Risman Hakim    146     Website

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

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More