Create Rainbow Color Effect with css3 Animation

Perkembangan yang terjadi pada kode css3 membuat berbagai inovasi baru dapat dibuat hanya dengan kode css. Javascript memang masih tetap dibutuhkan, namun demikian porsinya semakin hari akan semakin jauh berkurang. Berbagai animasi yang berbasis pada gerak, warna ataupun ukuran, baik yang melibatkan gambar ataupun tidak, kini bisa dibuat hanya menggunakan kode css3 animation yang dipadukan dengan css3 transition, css3 transform serta berbagai properti css lainnya. Setelah beberapa browser besar seperti Mozilla Firefox, Safari (Apple) dan Google Chrome, dalam bulan Mei-Juni ini Opera juga sudah mulai memberikan dukungan penuh thd css3 animation. Keraguan untuk membuat tutorial & desain yang menggunakan kode css3 animation lenyap sudah. Kini kita hanya tinggal menunggu IE yang tak lama lagi juga pasti segera mengikuti jejak Opera. Membuat Efek Warna Pelangi pada Hover Teks Link menggunakan kode css3 animation sangat sederhana tetapi tetap mampu menghasilkan kemampuan maksimal. Dengan fungsi hover pelangi ini, maka hover pada setiap teks link akan mempunyai warna berubah-ubah ketika cursor di arahkan di atasnya. Anda dapat mengatur warna pelangi dengan cara merubah warna yang digunakan dalam kode css. Dibawah ini adalah beberapa contoh hasil penggunaan efek warna pelangi pada teks link. Arahkan cursor anda pada teks link di bawah:

Silahkan juga arahkan cursor anda ke berbagai link yang ada di blog untuk melihat sejauh mana pengaruh kode css ini terhadap teks link yang digunakan.
Back to Tutorial

No comments:

Post a Comment