Berikut Contoh Animasinya
Belajar ngoding bersama ahmad hayun
Untuk membuat teks seperti mengetik sendiri dengan menggunakan html ada dua file yang harus dibuat yaitu file css (cascading stylesheet) dan file html (hypertext markup language). selain dengan memisahkan antara file css dan file html kita juga bisa langsung menggabungkannya di file html.
untuk membuat teks mengetik sendiri maka saya akan berikan kedua cara di atas yaitu cara pertama dengan memisahkan file css. berikut kode css yang harus dibuat :
.animasi {
color: #EBE3AA;
font-family:sans-serif;
font-weight:lighter;
font-size: 2em;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: keyframes 5s steps(500) infinite;
}
@keyframes keyframes{
from{ width: 0px;}
}
color: #EBE3AA;
font-family:sans-serif;
font-weight:lighter;
font-size: 2em;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: keyframes 5s steps(500) infinite;
}
@keyframes keyframes{
from{ width: 0px;}
}
simpan scipt di atas dengan nama style.css.
sekarang kita buat file html untuk membuat teks mengetik sendiri berikut adalah script yang harus dibuat :
<!DOCTYPE html>
<html>
<head>
<title>Animasi Mengetik Teks Dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Berikut Contoh Animasinya</h1>
<div class="animasi">
Semangat Yah Belajar Coding nya ^_^
</div>
</body>
</html>
<html>
<head>
<title>Animasi Mengetik Teks Dengan CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Berikut Contoh Animasinya</h1>
<div class="animasi">
Semangat Yah Belajar Coding nya ^_^
</div>
</body>
</html>
simpan file tersebut misal dengan nama mengetik.html, apabila sudah maka kita tinggal jalankan file mengetik.html tersebut. berjalan bukan?
nah sekarang timbul pertanyaan bagaimana menggabungkan kedua file tersebut, agar membuat teks mengetik itu menjadi satu file. ini adalah kodenya
<html>
<head>
<style>
.animasi {
color: #EBE3AA;
font-family:sans-serif;
font-weight:lighter;
font-size: 2em;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: keyframes 5s steps(500) infinite;
}
@keyframes keyframes{
from{ width: 0px;}
}
</style>
<title>Animasi Mengetik Teks Dengan CSS</title>
<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Berikut Contoh Animasinya</h1>
<div class="animasi">
Belajar ngoding bersama ahmad hayun
</div>
</body>
</html>
<head>
<style>
.animasi {
color: #EBE3AA;
font-family:sans-serif;
font-weight:lighter;
font-size: 2em;
white-space: nowrap;
overflow: hidden;
width: 30em;
animation: keyframes 5s steps(500) infinite;
}
@keyframes keyframes{
from{ width: 0px;}
}
</style>
<title>Animasi Mengetik Teks Dengan CSS</title>
<link href='http://fonts.googleapis.com/css?family=Bevan' rel='stylesheet' type='text/css'>
</head>
<body>
<h1>Berikut Contoh Animasinya</h1>
<div class="animasi">
Belajar ngoding bersama ahmad hayun
</div>
</body>
</html>
simpan sript di atas dengan nama misal teksmengetiksatufile.html. kemudian bukalah file tersebut, sama bukan? lebih sederhana mana dan lebih enak yang mana tinggal pilih.
0 komentar: