Cara Membuat Animasi Background pada Teks

Cara Membuat Animasi Background pada Teks - Berkat peningkatan CSS saat ini kita bisa dengan mudah dalam membuat sebuah efek, dan animasi pada sebuah suatu objek, misalnya menambahkan efek pada gambar, pada sebuah teks, menambahkan animasi pada objek gambar dan objek lainnya. Nah, pada kesempatan kali ini saya akan bagikan satu contoh animasi sederhana yang bisa kita buat dengan CSS yaitu animasi background pada teks, bagi kalian yang ingin mencoba silahkan ikuti langkah - langkahnya berikut ini.

Untuk membuat animasi background pada teks sangatlah mudah sekali, dimana objek yang akan dikenai adalah teks, silahkan ketikan sintak HTML berikut untuk membuat elemen teksnya.

<body>
    <h1 class="teks">DUMETSchool.</h1>
</body>

Setelah membuat elemen teks seperti diatas, selanjutnya desain dan atur teks dan menambahkan gambar sebagai background teks, kemudian juga menambahkan animasi sederhana yakni animasi zoom, silahkan ketikan sintak CSS berikut ini.

html {
  width: 100%;
  height: 100%;
}
body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex-wrap: wrap;
  background: #232323;
}
.teks {
  font-size: 8vw;
  line-height: 8vw;
  margin: 0;
  font-weight: 900;
  background: url(background.jpg);
  background-size: 40%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  color: rgba(0,0,0,0.08);
  animation: zoom 10s ease 500ms forwards;
}
@keyframes zoom {
  from {
    background-size: 40%;
  }
  to {
    background-size: 10%;
  }
}

Setelah semua sintak HTML dan CSS telah diketikan semua, silahkan simpan filenya kemudian kalian bisa buka pada browser masing - masing dan lihat hasilnya.

Baiklah, cukup sekian tutorial sederhana CSS kali ini semoga tutorial bagaimana Cara Membuat Animasi Background pada Teks bermanfaat, selamat mencoba dan sampai jumpa diartikel selanjutnya.

15 Juni 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat