Membuat efect animasi pada border.

Pada artikel ini kita akan mengeksplorasi efek animasi pada border, artikel ini merupakan sebagai tingkat lanjut dari artikel sebelumnya, mungkin Anda tertark untuk membacanya silahkan melihat Multi Color Border menggunakan CSS3. Adapun efek yang terdapat pada artikel kali ini pure menggunakan css dengan kata lain tanpa menggunakan Javacript atau JS. Harap dicatat bahwa teknik ini sangat eksperimental, jadi besar kemungkinan tidak bekerja dengan baik pada setiap browser.

Ketika melihat efeknya, mungkin tidak segera jelas apa yang terjadi, tetapi ketika Anda melihat secara dekat pada satu border, katakanlah, border atas, maka Anda akan melihat bahwa pertama, lebar garis putih menurun dari kanan ke kiri dan baris baru bergerak dari kanan dengan sedikit keterlambatan. Ketika menambahkan semua sisi lain, tampak seolah-olah bagian atas bergerak di sekitar sudut ke sisi kiri, sisi kiri bergerak ke sisi bawah, dan sebagainya. Untuk lebih jelasnya silahkan click tombol demo dibawah.

DemoDownload Source

Anda pasti dapat membuat efek ini tanpa SVG, bahkan tanpa elemen tambahan, hanya menggunakan pseudo-elemen. Tapi di sini kita ingin menjelajahi apa yang bisa kita lakukan dengan SVG dan bagaimana kita dapat mengontrol melalui CSS daripada menggunakan JavaScript. Sekarang, berpikir tentang bagaimana untuk membuat efek ini menggunakan SVG, kita bisa menghidupkan stroke-dashoffset stroke persegi panjang atau menarik garis langsung, untuk tutorial lebih lengkapnya Anda bisa mengunjungi tympanus.net.

Share this: