Cara Membuat Animasi Sosial Media
Cara Membuat Animasi Sosial Media - Animasi pada halaman website menjadi bagian yang sangat penting untuk menunjang desain website agar terlihat lebih menarik dan lebih hidup. Saat ini ada banyak cara untuk membuat berbagai animasi, salah satu yang populer untuk membuat animasi adalah dengan jQuery, tetapi ada juga animasi yang bisa kita buat dengan CSS. Seperti tutorial berikut yang akan saya bagikan kepada kalian yakni Cara Membuat Animasi Sosial Media. Buat kalian yang ingin membuatnya silahkan ikuti langkah - langkahnya berikut ini.
Untuk membuat animasi sosial media, langkah pertama silahkan buat file index.html kemudian ketikan struktur HTML berikut untuk membuat icon.
<div class="container">
<a href="#">Instagram</a>
<div class="icon-instagram">
<i class="fab fa-instagram"></i>
</div>
</div>
</body>
Selanjutnya, mengatur layout dan membuat animasi sosial media agar layout pada icon terjadi pergerakan. Untuk membuat animasinya silahkan ketikan sintak CSS berikut ini.
<style>
* {padding: 0; margin: 0;}
.container {
position: relative;
width: 200px;
margin: auto;
height: 250px;
}
.container a {
width: 180px;
padding: 10px 0;
background: #222222;
color: white;
text-align: center;
display: block;
text-decoration: none;
position: absolute;
left: 10px;
bottom: 0;
border-radius: 5px;
}
.icon-instagram {
position: absolute;
left: 5px;
top: 50px;
width: 190px;
height: 200px;
background: #eaeaea;
text-align: center;
border-radius: 5px;
transition: all 1s cubic-bezier(.79,.14,.15,.86);
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.container:hover > .icon-instagram {
top: 15px;
transition: all 1s cubic-bezier(.79,.14,.15,.86);
}
.icon-instagram .fa-instagram {
line-height: 200px;
font-size: 50px;
color: #222222;
}
</style>
Pada kasus ini icon sosial media saya memanfaatkan icon dari fontawesome, untuk itu jangan lupa untul meload library dari fontawesome seperti diatas. Setelah semua sintak HTML dan CSS telah diketikan. Langkah terakhir simpan kembali filenya kemudian silahkan buka pada browser masing - masing untuk melihat hasil akhirnya.
Baiklah, itu diatas adalah tutorial sederhana bagaimana Cara Membuat Animasi Sosial Media semoga tutorial diatas bermanfaat, 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)
