Cara Membuat Animasi Background pada Teks

15/06/2020    Risman Hakim    76     Website

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.

Web Design, HTML CSS

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More