Thẻ HTML <blink> là một phần tử HTML. Nó cho phép văn bản nhấp nháy trên màn hình. Việc bao bọc văn bản bằng thẻ <blink> sẽ làm văn bản nhấp nháy trên trang web của bạn.
Tuy nhiên, thẻ này đã bị phản đối và lỗi thời. Bạn không thể sử dụng nó nữa. Hầu như không có trình duyệt hiện đại nào hỗ trợ thẻ này. Bạn có thể nghĩ rằng mình không còn lựa chọn nào.
May mắn thay, chúng ta có thể tái tạo hiệu ứng này bằng CSS đơn giản.
Tái tạo hiệu ứng nhấp nháy bằng CSS
Chúng ta sẽ bắt đầu với một ví dụ đơn giản. Mục tiêu là làm cho văn bản nhấp nháy. Thay vì dùng thẻ <blink> đã lỗi thời, chúng ta sẽ dùng thẻ <span> với lớp "blink".
Mã HTML mẫu là:
<span class="blink">Blink 182</span>
Tạo hoạt ảnh nhấp nháy
Tiếp theo, chúng ta sẽ tạo các keyframes. Chúng dùng để tạo hoạt ảnh thực sự.
Mã CSS keyframes là:
@keyframes blink {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}
Khi một vật nhấp nháy, nó hiển thị rồi ẩn đi, sau đó lại hiển thị rồi ẩn đi. Ở 0%, độ mờ (opacity) là 1 (hiển thị). Ở 50%, độ mờ là 0 (ẩn). Sau đó, ở 100%, độ mờ trở lại 1 (hiển thị). Điều này tạo ra chu kỳ hiển thị và ẩn.
Với các keyframes này, chúng ta có thể tạo một lớp CSS cho thẻ <span> có lớp "blink".
Mã CSS cho lớp .blink (phiên bản đầu tiên) là:
.blink {
animation: blink 1s infinite;
}
Thuộc tính animation áp dụng hoạt ảnh blink. Hoạt ảnh này kéo dài 1 giây và lặp lại vô hạn (infinite). Điều này làm cho văn bản tiếp tục nhấp nháy mãi mãi.
Làm cho văn bản nhấp nháy thực sự (không mờ dần)
Bạn sẽ nhận thấy hoạt ảnh đang chạy. Nhưng nó không nhấp nháy rõ ràng. Nó chỉ mờ dần vào và mờ dần ra. Chúng ta muốn nó nhấp nháy thực sự, giống như thẻ <blink> ngày xưa. Để khắc phục điều này, chúng ta thêm hàm steps().
Mã CSS đã sửa đổi cho lớp .blink là:
.blink {
animation: blink 1s steps(1, end) infinite;
}
Chúng ta đặt hoạt ảnh diễn ra trong một bước (1) và vị trí kết thúc (end). Điều này buộc sự thay đổi độ mờ xảy ra tức thì. Kết quả là văn bản nhấp nháy rõ ràng, không mờ dần.
Các lựa chọn thay thế sáng tạo cho thẻ HTML Blink
Năm 2025, chúng ta có thể tạo ra những hiệu ứng tinh tế hơn. Không chỉ là một thẻ nhấp nháy đơn giản.
Hiệu ứng mờ dần mượt mà
Nếu chúng ta loại bỏ hàm steps(), hiệu ứng mờ dần sẽ mượt mà hơn. Nó tạo cảm giác hiện đại hơn so với thẻ nhấp nháy đơn giản.
Hiệu ứng khoa học viễn tưởng mờ dần sang màu xanh
Chúng ta có thể thử một hiệu ứng khoa học viễn tưởng. Văn bản mờ dần và chuyển sang màu xanh lam.
Mã CSS keyframes cho hiệu ứng này là:
@keyframes blink {
0% { opacity: 1; }
100% { opacity: 0; color: blue; }
}
Mã CSS cho lớp .blink là:
.blink {
animation: blink 3s infinite;
}
Khi văn bản mờ dần, nó chuyển sang màu xanh lam. Điều này tạo ra vẻ ngoài khoa học viễn tưởng cổ điển. Việc thay đổi thời gian hoạt ảnh thành 3 giây làm chậm hiệu ứng. Nó tăng cường cảm giác mờ dần.
Hiệu ứng phát triển và thu nhỏ
Một hiệu ứng thú vị khác là làm cho văn bản lớn dần và mờ dần. Sau đó nó quay trở lại với hiệu ứng mờ dần.
Mã CSS keyframes cho hiệu ứng này là:
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0; transform: scale(2); }
51% { opacity: 0; transform: scale(0); }
100% { opacity: 1; transform: scale(1); }
}
Hiệu ứng này làm cho văn bản lớn dần và mờ dần. Sau đó nó quay trở lại. Nó tạo ra một hiệu ứng ba chiều đẹp mắt. Văn bản như đang tiến về phía bạn, rồi lại lùi về phía sau.
Kết luận về thẻ HTML Blink
Thẻ <blink> không còn được sử dụng. Tuy nhiên, chúng ta có thể dễ dàng tái tạo hiệu ứng này bằng các hoạt ảnh CSS đơn giản. Điểm thú vị là chúng ta có thể áp dụng các hoạt ảnh này cho bất cứ thứ gì. Ví dụ, tái tạo hiệu ứng marquee (cũng đã lỗi thời) hoặc tạo các hiệu ứng nhịp nhàng.
Hoạt ảnh CSS rất mạnh mẽ và linh hoạt. Chúng có thể tạo ra bất kỳ hiệu ứng nào bạn muốn. Giờ đây, bạn có thể tái tạo hiệu ứng thẻ <blink> yêu thích của mình. Bạn có thể áp dụng nó vào bất kỳ dự án nào. Hãy sử dụng các kỹ thuật CSS hiện đại và được hỗ trợ.
Tham khảo: medium.com
Bài viết liên quan: