Bạn có bao giờ muốn làm cho văn bản trên trang web của mình trở nên sinh động và cuốn hút hơn? Một trong những cách hiệu quả để làm điều này là sử dụng hiệu ứng "Typewriter". Trong bài viết này, chúng ta sẽ khám phá cách tạo ra hiệu ứng này chỉ bằng CSS, mà không cần sự hỗ trợ của JavaScript.

1. Tìm hiểu về hiệu ứng "Typewriter"

Hiệu ứng "Typewriter" giúp văn bản xuất hiện trên trang web một cách từng ký tự một, giống như âm thanh đặc trưng của một máy đánh chữ cổ điển. Điều này không chỉ tạo ra một trải nghiệm thú vị mà còn làm cho nội dung trở nên độc đáo và chú ý.

2. Cách tạo hiệu ứng "Typewriter" bằng CSS

Đầu tiên, chúng ta sẽ tạo một container để chứa văn bản:

<div class="typewriter">
  <h1>Hiệu ứng "Typewriter" chỉ với CSS!</h1>
</div>

Tiếp theo, sử dụng CSS để thực hiện hiệu ứng:

body {
  background: #333;
  padding-top: 5em;
  display: flex;
  justify-content: center;
}

.typewriter h1 {
  color: #fff;
  font-family: monospace;
  overflow: hidden; /* Ẩn văn bản khi bắt đầu */
  border-right: 0.15em solid orange; /* Hiển thị dấu nháy đang gõ */
  white-space: nowrap; /* Ngăn văn bản xuống dòng */
  font-size: 1.5em; /* Kích thước chữ */
  margin: 0 auto; /* Canh giữa */
  letter-spacing: 0.15em; /* Khoảng cách giữa các ký tự */
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

/* Hiệu ứng typing */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Hiệu ứng con trỏ typewriter */
@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }
  50% {
    border-color: orange;
  }
}

Demo hiệu ứng "Typewriter"

3. Giải thích CSS

• typewriter: đây là container chứa văn bản. Hiệu ứng được tạo ra thông qua keyframe animation.

• @keyframes typing: một keyframe animation để mô phỏng quá trình viết máy đánh chữ.

• @keyframes blink-caret: animation để tạo hiệu ứng nhấp nháy của dấu nháy "caret".

4. Tùy chỉnh và sử dụng

Bạn có thể tùy chỉnh màu sắc, kích thước và font chữ theo ý muốn của mình bằng cách sửa đổi mã CSS. Để sử dụng hiệu ứng này, chỉ cần nhúng mã HTML và CSS vào trang web của bạn.

Với hiệu ứng "Typewriter" này, trang web của bạn sẽ không chỉ thu hút sự chú ý mà còn tạo ra một trải nghiệm độc đáo cho người xem. Đừng ngần ngại thử nghiệm và tùy chỉnh để tạo ra hiệu ứng phù hợp với thiết kế của bạn!