Membuat animasi teks mengetik dengan CSS
Hallo teman-teman, salam jumpa kembali…
Di artikel kali ini penulis ingin membahas panduan Merancang animasi teks mengetik dengan CSS. Seketika aja ya kita bahas cara pembuatannya…
Sebelum kita lanjut Merancang animasi teks mengetik dengan CSS, teman-teman bikin dulu ya file HTML-nya dan juga 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.sourcecodeaplikasi.info>Source Code Aplikasi</a></p>
</body>
</html>
- Di tag <p> di atas saya menambahkan class dengan nama class yaitu: text
<p class=text>
2. Di pada tag <p> saya pun menambahkan sebuah link menggunakan tag <a href =”nama link”>
<a href=http://www.sourcecodeaplikasi.info>Source Code Aplikasi</a>
Bagi ke-dua bagian di atas, teman-teman boleh ganti dengan nama atau link yang teman-teman inginkan.
Berikutnya, kita akan memberikan efek animasi di teks di atas:
Merancang 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 pada tag <style>code-css</style> di bawah tag <title></title>), atau teman-teman merancang file baru lagi khususnya bagi 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; }
}Merancang animasi teks mengetik dengan CSS Bila teman-teman merancang file baru bagi css-nya, teman-teman jangan lupa memanggil file .css nya di 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>.
Merancang animasi teks mengetik dengan CSS Nah, bagi berikutnya silahkan teman-teman buka file html yang teman-teman bikin tadi. Kira-kira hasilnya seperti di gambar di bawah ini :
Merancang animasi teks mengetik dengan CSS Bagi animasi-nya, teman-teman dapat lihat sendiri di browser masing-masing.
Demikianlah dulu teman-teman bagi artikel Merancang animasi teks mengetik dengan CSS.
Selamat mencoba ya teman-teman… ^_^
Sumber https://kursuswebsite.org
