Efek Text Mengetik Dengan CSS
Kalian tentu pernah melihat berbagai efek animasi pada halaman website, termasuk salah satunya efek mengetik teks.
Efek ketikan teks ini biasanya sering muncul pada bagian news ticker di website berita, atau pada halaman website yang terkena hack.
Efek mengetik teks seperti itu biasanya dibuat dengan bantuan JavaScript, namun kali ini Saya akan mencoba membuatnya hanya dengan CSS saja, yaitu dengan fitur animasi di CSS.
HTML
Pertama buat terlebih dahulu tulisan yang akan dibuat animasinya, kita cukup menaruhnya pada sebuah div yang diberi nama class .mengetik.
<p class="mengetik">Hallo, selamat datang...</p>
CSS Kemudian kita tambahkan kode CSS untuk membuat animasi efek mengetik teks seperti berikut ini
.mengetik{
width: 700px;
white-space: nowrap;
overflow: hidden;
font-size: 17px;
animation: ketik 5s steps(500, end) infinite;
}
@keyframes ketik{
from { width: 0; }
}
@keyframes ketik{
from { width: 0; }
}
Terlihat di situ kita menggunakan animasi dengan nama mengetik yang di panggil dari class CSS
.mengetikDownlaod Script & Demo
Jika Anda tertarik ingin mencoba bisa melihat demo dan mendownload script nya dibawah!. Semoga trik singkat ini bermanfaat untuk meningkatkan skill CSS kalian ya..
0 Komentar
Peraturan Berkomentar!!!
► Komentarlah sesuai dengan topik artikel
► Dilarang menggunakan kata yang mengandung SARA dan sejenisnya
► Dilarang membuat link aktif
► Dilarang spam dalam berkomentar
► Berkomentarlah yang baik dan sopan
Terima kasih atas kunjungan anda, Selamat Berkomentar.
Hubungi Admin segera jika ada masalah atau error lainnya
▁ ▂ ▃ ▄ ▅ ▆ ▇ █ █ ▇ ▆ ▅ ▄ ▃ ▂ ▁
Penulisan markup di komentar