Membuat Animasi Karakter Hantu Lucu dengan CSS

Hallo semuanya, pada kesempatan kali ini saya akan memberikan lanjutan dari kedua artikel saya sebelumnya. Kali ini kita masih membahas tentang karakter hantu yang kita buat pada artikel saya yang berjudul membuat hantu lucu dengan css bagian 1 dan  membuat karakter hantu lucu dengan css bagian 2.

Bentuk hantunya sudah kita dapatkan, maka artikel kali ini kita akan memberikan efek animasi agar terlihat lebih hidup.

 

Kali ini kita akan membuat masing-masing animasi untuk badan, mata, mulut, dan ekor hantunya juga dengan memanfaatkan fungsi @keyframe pada css. Berikut adalah masing-masing animasi yang akan kita berikan

Animasi untuk mata

Buat mata jadi membesar dan mengecil

 

Animasi untuk mulut

buat mulut berubah menjadi oval dan kembali ke lingkaran

 

Animasi untuk badan hantu

 

Membuat badan hantu menjadi bergoyang ke kiri dan ke kanan

 

 

Animasi untuk ekor

Membuat ekor bergeser ke kiri dan kanan secara cepat.

 

Untuk lebih jelasnya kalian bisa lihat demo nya seperti dibawah ini

 

17 Desember 2016

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