Cách Tạo Hiệu Ứng Lỗi Văn Bản Bằng CSS

Bạn có muốn tạo phong cách độc đáo cho văn bản của mình với hiệu ứng lỗi không? Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo hiệu ứng lỗi văn bản bằng cách sử dụng chỉ CSS, không cần JavaScript! Đây là một cách thú vị để thêm phong cách cho tiêu đề, banner hoặc bất kỳ phần nào của trang web mà bạn muốn tạo cảm giác công nghệ và lỗi.

Mục Lục

• Bước 1: Thiết lập HTML cơ bản
• Bước 2: Định dạng văn bản chính
• Bước 3: Tạo hai lớp với pseudo-element
• Bước 4: Định dạng lớp trên cùng
• Bước 5: Định dạng lớp dưới cùng
• Bước 6: Hoạt hình toàn bộ văn bản
• Bước 7: Hoạt hình lớp trên cùng
• Bước 8: Hoạt hình lớp dưới cùng
• Những lưu ý cuối cùng
• Câu hỏi thường gặp

Bước 1: Thiết lập HTML cơ bản

<div class="text" title="Glitch">
  Glitch
</div>

• Chúng ta sử dụng một <div> với lớp text.
• Thuộc tính title giữ văn bản mà chúng ta sẽ tái sử dụng trong hoạt hình.

Bước 2: Định dạng văn bản chính

.text {
  font-size: 26px;
  color: #000;
  font-weight: bold;
  animation: text-animation 1s linear infinite;
}

• Đoạn mã này định dạng kích thước, màu sắc và làm cho văn bản trở nên đậm.
• Chúng ta áp dụng text-animation để làm cho văn bản di chuyển nhẹ, tạo cảm giác lỗi.

Bước 3: Tạo hai lớp với pseudo-element

.text:before,
.text:after {
  content: attr(title);
  position: absolute;
  left: 0;
}

• Chúng ta tạo hai lớp văn bản bằng cách sử dụng ::before và ::after.
• content: attr(title) lấy văn bản từ thuộc tính title và hiển thị nó.
• Sau này, chúng ta sẽ cắt và hoạt hình chúng khác nhau để tạo hiệu ứng lỗi.

Bước 4: Định dạng lớp trên cùng

.text:before {
  animation: text-animation-top 1s linear infinite;
  clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

• Chúng ta chỉ hiển thị phần trên cùng của văn bản bằng cách sử dụng clip-path.
• Hoạt hình text-animation-top di chuyển lớp này theo các hướng khác nhau.

Bước 5: Định dạng lớp dưới cùng

.text:after {
  animation: text-animation-bottom 1.5s linear infinite;
  clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

• Chúng ta chỉ hiển thị phần dưới cùng của văn bản.
• Lớp này có tốc độ hoạt hình hơi khác để tạo cảm giác lỗi thú vị hơn.

Bước 6: Hoạt hình toàn bộ văn bản

@keyframes text-animation {
  2%, 64% {
    transform: translate(2px, 0) skew(0deg);
  }
  4%, 60% {
    transform: translate(-2px, 0) skew(0deg);
  }
  62% {
    transform: translate(0, 0) skew(5deg);
  }
}

• Hoạt hình này làm cho toàn bộ văn bản di chuyển nhẹ sang hai bên và nghiêng một chút.
• Những thay đổi nhanh chóng này làm cho văn bản trông như đang rung chuyển.

Bước 7: Hoạt hình lớp trên cùng

@keyframes text-animation-top {
  2%, 64% {
    transform: translate(2px, -2px);
  }
  4%, 60% {
    transform: translate(-2px, 2px);
  }
  62% {
    transform: translate(13px, -1px) skew(-13deg);
  }
}

• Phần trên cùng của văn bản rung và xoay tại một số thời điểm.
• Điều này tạo ra hiệu ứng bùng nổ lỗi.

Bước 8: Hoạt hình lớp dưới cùng

@keyframes text-animation-bottom {
  2%, 64% {
    transform: translate(-2px, 0);
  }
  4%, 60% {
    transform: translate(-2px, 0);
  }
  62% {
    transform: translate(-22px, 5px) skew(21deg);
  }
}

• Phần dưới cùng di chuyển theo các hướng khác nhau tại các khoảng thời gian nhất định.
• Sự ngẫu nhiên này làm cho hiệu ứng lỗi cảm thấy tự nhiên hơn.

Những lưu ý cuối cùng

• Những bước này tạo ra một hoạt hình lỗi nhiều lớp chỉ bằng CSS.
• Bạn có thể điều chỉnh thời gian, chuyển động và cắt để làm cho nó mạnh mẽ hơn hoặc tinh tế hơn.
• Tránh sử dụng hiệu ứng lỗi trên các khối văn bản dài; chúng có thể khó đọc.
• Bạn có thể kết hợp nó với các phông chữ đậm để làm nổi bật hơn.
• Sử dụng nó một cách tiết kiệm trên tiêu đề hoặc nút kêu gọi hành động để duy trì trải nghiệm người dùng.
• Hãy xem CSSnippets để biết thêm các thành phần và hiệu ứng UI mà bạn có thể dễ dàng tích hợp vào các dự án của mình!

Câu hỏi thường gặp

Hiệu ứng lỗi có thể sử dụng cho những mục nào?

Hiệu ứng lỗi thường được áp dụng cho tiêu đề, banner hoặc các nút kêu gọi hành động để tạo sự nổi bật và thu hút sự chú ý.

Có thể điều chỉnh tốc độ hoạt hình không?

Có, bạn hoàn toàn có thể điều chỉnh tốc độ hoạt hình trong các đoạn mã CSS để tạo ra hiệu ứng theo ý thích.

Có cần sử dụng JavaScript không?

Không, bạn có thể hoàn toàn tạo hiệu ứng này chỉ bằng CSS mà không cần JavaScript.

Đó là tất cả cho hôm nay!

Nếu bạn muốn hợp tác, hãy liên hệ với tôi qua: connect@shefali.dev

Nếu bạn thích công việc của tôi và muốn ủng hộ tôi:

👉 Trở thành người hỗ trợ trên Patreon
👉 Hoặc mua cho tôi một tách cà phê

Mỗi cử chỉ nhỏ đều giúp tôi tiếp tục công việc! 💛