Home Web Desain CSS CSS Text Typing Animation

CSS Text Typing Animation

Kali ini saya membuat tutorial membuat animasi text dengan kode HTML dan CSS. Hanya dengan HTML dan CSS kita dapat membuat otomatis mengetik sebenarnya yang saya buat kali ini hanya dasar, anda bisa mengembangkan sendiri dengan kode yang ada ditutorial ini.

PERSIAPAN

Buatlah folder css typing untuk menyimpan file index.html dan style.css

Siapkan text editor yang biasa anda gunakan.

MEMBUAT HALAMAN UTAMA

Tulislah kode html berikut dan simpan file dengan nama index.html

<!DOCTYPE html>
<html>
<head>
  <title>Typing animasi text with CSS</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <p>Tulisan ini adalah contoh bahwa tutorial berhasil</p>
<p>Selamat Belajar  
:)<span>|</span></p> 

</body>
</html>

 

Selanjutnya kita buat file baru dan tuliskan kode css berikut ini. Lalu buat folder css lalu simpan kode css ini di dalam folder css dengan nama style.css

  body{
  background: #000;
  padding-top: 10px;
} 
p{
  color: lime; 
  font-family: "Courier";
  font-size: 30px;
  margin: 10px 0 0 10px;
  white-space: nowrap;
  overflow: hidden;
  width: 30em;
  animation: type 4s steps(60, end); 
}
p:nth-child(2){
  animation: type2 8s steps(60, end);
}
p a{
  color: lime;
  text-decoration: none;
}
span{
  animation: blink 1s infinite;
}
@keyframes type{ 
  from { width: 0; } 
} 
@keyframes type2{
  0%{width: 0;}
  50%{width: 0;}
  100%{ width: 100; } 
}
@keyframes blink{
  to{opacity: .0;}
}
::selection{
  background: black;
}

 

Maka setelah semua kode sudah ditulis buka file index.html dengan browser tampilan nya akan seperti berikut:

Nah sekarang anda sudah berhasil membuat text effect yang keren. Selamat belajar.

Terima Kasih telah membaca.

***PIU***

 

NO COMMENTS

LEAVE A REPLY

Please enter your comment!
Please enter your name here