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.
<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.
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.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)