Salam hangat teman-teman, semoga teman-teman sehat selalu ya, Kali ini saya akan mencoba membagi Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 2.

Setelah kemarin saya buat tutorial tentang Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1 dengan efek animasinya berupa slide rollover sekarang saya akan mencoba memberikan animasi spin rollover pada icon.

Mari kita mulai tutorial singkat tentang Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 2, pada part 2 kali ini saya akan mencoba memberi efek animasi spin roll over pada icon social medianya, yaitu icon akan berputar pada saat kita hover.

berikut adalah langkah-langkahnya:

– Pertama teman-teman harus mempunya gambar atau ikon yang mempunya dua latar background berbeda dalam satu file .png atau jpeg dan simpan dalam satu folder icon.

– Kedua Teman-teman langsung saja copy dan paste kode css3 yang kemarin kita buat lalu tambahkan kode css3 di bawah ini untuk memberi efek memutar pada icon, kenapa tidak menulis HTML-nya lagi karena saya masih memakai kode html yang telah saya buat pada tutorial Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1:

sebelum kita beri efek memutar tampilannya akan menjadi seperti ini:

Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 2-1

Setelah kita beri efek maka hasilnya akan menjadi seperti ini:

Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 2-2

Bagaimana teman-teman mudahkan Menambahkan Efek Pada Icon Menggunakan CSS3 Part 2.

Sekian tutorial saya untuk kali ini tentang Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 2. Maaf bila ada kesalahan dalam tutorialnya.

Sehat selalu ya teman-teman, selamat mencoba.

 

Baca juga artikel sebelumnya

Cara Menambahkan Efek Pada Icon Menggunakan CSS3 Part 1