Membuat animasi teks mengetik dengan CSS

Hallo teman-teman, salam jumpa kembali…

Pada artikel kali ini penulis ingin membahas tutorial Membuat animasi teks mengetik dengan CSS. Langsung aja ya kita bahas cara pembuatannya…

Sebelum kita lanjut Membuat animasi teks mengetik dengan CSS, teman-teman buat dulu ya file HTML-nya beserta kodingannya seperti contoh di bawah ini:

<!DOCTYPE html>
<html>
<head>
	<title>animasi-teks-mengetik</title>
</head>
<body>
	<p class="text">Welcome to <a href="http://www.dumetschool.com">DUMET School</a></p>
</body>
</html>

Pada tag <p> di atas saya menambahkan class dengan nama class yaitu: text

<p class="text">

2. Di dalam tag <p> saya juga menambahkan sebuah link menggunakan tag <a href =”nama link”>

<a href="http://www.dumetschool.com">DUMET School</a>

Untuk ke-dua bagian di atas, teman-teman boleh ganti dengan nama atau link yang teman-teman inginkan.

Selanjutnya, kita akan memberikan efek animasi pada teks di atas:

Membuat animasi teks mengetik dengan CSS Teman-teman silahkan copy koding css-nya di bawah ini terlebih dahulu, kemudian teman-teman boleh menaruhnya secara inline css (di dalam tag <style>code-css</style> di bawah tag <title></title>), atau teman-teman membuat file baru lagi khususnya untuk css nya.

body {
   width: 900px;
   margin: auto;
}
.text {
   text-align: center;
   width: 900px;
   font-size: 50px;
   white-space: nowrap;
   overflow: hidden;
   -webkit-animation: anim 5s steps(50, end);
   animation: anim 5s steps(50, end);
}

.text a {
   text-decoration: none;
   color: darkblue;
}

@keyframes anim {
   from { width: 0; }
}

@-webkit-keyframes anim{
   from { width: 0; }
}

Membuat animasi teks mengetik dengan CSS Jika teman-teman membuat file baru untuk css-nya, teman-teman jangan lupa memanggil file .css nya pada html-nya ya… Contoh pemanggilan css-nya seperti dibawah ini :

<link rel="stylesheet" type="text/css" href="nama-file.css">

Taruh koding pemanggilan css di-atas dibawah tag <title></title>.

Membuat animasi teks mengetik dengan CSS Nah, untuk selanjutnya silahkan teman-teman buka file html yang teman-teman buat tadi. Kira-kira hasilnya seperti pada gambar di bawah ini :

Membuat animasi teks mengetik dengan CSS Untuk animasi-nya, teman-teman bisa lihat sendiri pada browser masing-masing.

Sekian dulu teman-teman untuk artikel Membuat animasi teks mengetik dengan CSS.

Selamat mencoba ya teman-teman… ^_^

Membuat animasi teks mengetik dengan CSS

Kategori