Cách tạo hiệu ứng đánh máy (Typewriter) với CSS

Giới thiệu

Với sự trợ giúp của CSS animations, chúng ta có thể tạo hiệu ứng đánh máy (typewriter) bằng JavaScript.

Ví dụ

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div { 
  margin: 2%; 
  font-family: Courier, monospace; 
  display: inline-block; 
} 
div > div { 
  overflow: hidden; 
  animation: enter 4s steps(30, end), blinker .65s step-end infinite; 
  white-space: nowrap; 
  font-size: 1.4em; 
  border-right: 5px solid blue; 
} 
@keyframes enter { 
  0% { 
    width: 0% 
  } 
  100% { 
    width: 100% 
  } 
} 
@keyframes blinker { 
  0%, 100% { 
    border-color: transparent 
  } 
  50% { 
    border-color: blue; 
  } 
} 
</style> 
</head> 
<body> 
<div class="typewriter"> 
<div class="typewriter-text">This is what you've been waiting for..</div> 
</div> 
</body> 
</html>

Kết quả

Đoạn mã trên sẽ cho kết quả sau: