Keberagaman jenis website yang ada merupakan tanda berkembangnya teknologi saat ini, dengan teknologi-teknologi saat ini kita bisa membuat website dengan fitur dan animasi-animasi yang sangat menarik. Contoh sederhana dalam pembuatan animasi sederhana dengan CSS3, dengan hanya menggunakan CSS3 kita bisa membuat berbagai animasi, seperti contoh berikut adalah tutorial bagaimana Membuat Animasi Objek dengan Bayangan menggunakan CSS3.

Pada contoh kasus ini saya membuat animasi objek dengan CSS3 yakni dengan objek kotak warna, baik simak langkah-langkah nya berikut ini. Langsung saja silahkan kalian bisa ketikan sintak HTML berikut sebagai struktur awal dari objek animasi nya.

Untuk objek sendiri kalian bisa sesuaikan sendiri, bisa dengan menambahkan gambar sebagai objek animasinya. Setelah struktur awal telah dibuat, selanjutnya adalah kita desain objek tersebut dengan menambahkan warna dan lain-lain nya dengan sintak CSS3 berikut.

Pada sintak CSS3 diatas kalian bisa modifikasi untuk animasi objek nya pada bagian sintak berikut.

Kalian bisa mengubah scale dan juga efek opacity sesuai keinginan, setelah semua sintak HTML dan CSS3 diatas kalian ketikan semua, langkah selanjutnya adalah simpan file dengan format.html kemudian kalian buka pada brwoser masing-masing dan lihat hasilnya. Untuk melihat animasi apa yang terjadi kalian bisa arahkan kursor pointer pada salah satu objek warna yang tersedia. Selesai

Bagaimana, menarik bukan ? cukup sekian tutorial mengenai bagaimana Membuat Animasi Objek dengan Bayangan semoga bermanfaat dan menginspirasi kalian dalam mendesain tampilan khususnya tampilan website.

DEMO