Typing Effect — Phan Nhật Chánh

Có rất nhiều thư viện Javascript với hiệu ứng kiểu máy đánh máy đẹp mắt đã được chia sẻ rất nhiều trên Internet như React Typist, TypeWriterJS,... Nếu bạn không muốn sử dụng thư viện thì dưới đây là một đoạn CSS ngắn với hiệu ứng máy đánh chữ đơn giản mà không sử dụng JavaScript bằng cách sử dụng thuộc tính animation trong CSS.


span {
  display: block;
  font-family: monospace;
  white-space: nowrap;
  border-right: 2px solid;
  width: 13ch;

  animation:
    typing 2s steps(13),
    blink 0.5s infinite step-end alternate;
  overflow: hidden;
}

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

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

border-right: 2px solid; độ rộng của con trỏ soạn thảo.
animation tốc độ của hiệu ứng đánh chữ, của dấu nhấp nháy.
overflow: hidden; ẩn đoạn văn bản.
width: 13ch; số ký tự của đoạn văn bản.


<span>Typing Effect</span>

Trong ví dụ trên, chúng ta đã sử dụng thuộc tính animation trong CSS để tạo hiệu ứng máy đánh. Bạn có thể thay đổi thời gian, tốc độ, và các giá trị khác để tùy chỉnh hiệu ứng theo nhu cầu của bạn.

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Typing Effect</title>
  <link rel="stylesheet" href="./styles.css" />
</head>
<body>
  <span>Typing Effect</span>
</body>
</html>

Open Sandbox