Cara Membuat Animasi Background Text dengan CSS – Untuk kamu yang sedang mempelajari pembuatan website menggunakan coding, pasti kamu tahu bukan kalau CSS itu bisa kamu gunakan untuk mempercantik tampilan website? Mulai dari ukuran, bentuk, warna dan animasi objek apa pun bahkan bisa kamu ubah hanya dengan menggunakan kode CSS.

Tentunya, kamu pasti pernah melihat bukan text dalam website yang memiliki animasi seperti bergerak-gerak? Nah, ternyata untuk membuat animasi text dalam website cukup mudah, loh! Kamu bisa menggunakan CSS saja untuk menggerakan animasinya.

Seperti di sini, DUMET School akan memberikan sedikit tips untuk membuat animasi background text dengan CSS. Kamu bisa ikuti coding ini ya!

Buat kode HTML-nya simpel saja seperti berikut:

Setelah itu, kamu bisa mengetikkan kode CSS ini:

Catatan:

  • Gunakan gambar yang sesuai keinginanmu.
  • Sesuaikan nama file gambar yang disimpan dengan tulisan dalam CSS di bagian background.
  • Simpan gambar di dalam folder yang sama dengan file HTML dan CSS-nya (atau jika ingin terpisah, sesuaikan url pada bagian background)

Setelah itu simpan. Dan lihat hasilnya. Kurang lebih, hasilnya akan menjadi seperti berikut ini:

membuat animasi text css

Text akan memiliki background gambar yang bergerak (zoom-out) bukan setiap kali di-reload? Sangat mudah ya membuatnya? Kamu juga bisa modifikasi kodenya mulai dari gambar background, isi text dan yang lainnya juga. Semoga artikel ini bermanfaat!~