Hallo sobat program, bertemu lagi dengan saya Rizal dan masih diwebsite dumetschool ini yang sangat luar biasa. Pada kesempatan ini saya akan membahas seputar HTML CSS yaitu tentang Cara Membuat Floating Animation HTML CSS.

Floating dalam arti bahasa Indonesia adalah mengapung atau mengambang jadi disini kita akan gunakan CSS animation untuk membuat sebuah gambar menjadi atau seakan akan mengambang. Caranya cukup sangat mudah yah teman-teman dan sebenarnya jika teman-teman berselancar di website codepen.io pasti menemukan animasi ini.

Oke langsung saja kita memulai Cara Membuat Floating Animation HTML CSS. Pertama-tama teman-teman buat folder terlebih dahulu kemudian siapkan gambar bebas. Lalu teman-teman jalankan software text-editornya dan ketiklah kode HTMLnya seperti pada contoh dibawah ini :

Jika sudah, langkah berikutnya teman-teman tambahkan style CSS nya seperti pada contoh dibawah ini :

Jika sudah dengan kode CSSnya, langkah terakhir tinggal teman-teman simpan dan coba dijalankan dibrowser yang teman-teman gunakan, jika benar maka hasilnya akan menjadi seperti pada contoh dibawah ini :

Cara Membuat Floating Animation HTML CSS

Dihasil akhir diatas gambar akan mengambang keatas kebawah sesuai ukuran animation css yang dibuat dengan infinite (berulang).

Oke kalau begitu cukup sampai disini dahulu pembahasan kita kali ini tentang Cara Membuat Floating Animation HTML CSS. Semoga dapat sangat bermanfaat dan sampai bertemu dipembahasan selanjutnya.

Terimakasih,

Sumber : codepen.io