Membuat Animasi Karakter Hantu Lucu dengan CSS

17/12/2016    Maykhel David    2005     Website

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

 

No data.

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