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