Cara Membuat Animasi Background pada Teks
15/06/2020 Risman Hakim 3223 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.
<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.
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
