Demo:
DesignBold
Hưỡng dẫn Text Stroke Animation CSS
Dưới đây là hướng dẫn chi tiết về cách tạo một hiệu ứng Text Stroke Animation sử dụng CSS:
:root{
--myText : 'Design Bold';
--textColor: #2CFF99;
--textStroke: 2px;
--anDuration: 6s;
}
selector{
-webkit-text-stroke: var(--textStroke) var(--textColor);
display: table;
width: -moz-fit-content;
width: -webkit-fit-content;
width: fit-content;
text-align: center;
margin: 0 auto;
}
selector .elementor-heading-title::before{
content: var(--myText);
color: var(--textColor);
position: absolute;
top: 0;
width: 0%;
height: 100%;
text-align: left;
overflow: hidden;
white-space: nowrap;
border-right: var(--textStroke) solid var(--textColor);
-webkit-animation:animateX var(--anDuration) linear infinite;
animation:animateX var(--anDuration) linear infinite;
}
@-webkit-keyframes animateX{
0%,10%,100%{
width:0%;
}
70%, 90%{
width: 100%;
}
}
@keyframes animateX{
0%,10%,100%{
width:0%;
}
70%, 90%{
width: 100%;
}
}
Giải thích
Đoạn code CSS này tạo ra một hiệu ứng animation cho text, sử dụng các biến CSS và keyframes. Dưới đây là giải thích chi tiết:
-
:root: Đây là một pseudo-class chọn phần tử gốc của tài liệu, thường là phần tử
<html>. Trong đoạn code này, nó định nghĩa một số biến CSS:--myText: Chứa nội dung text sẽ được hiển thị.--textColor: Màu sắc của text.--textStroke: Độ rộng của viền text.--anDuration: Thời gian chạy của animation.
-
selector: Phần này áp dụng các style cho một phần tử được chọn (được thay thế bằng tên class hoặc id thực tế trong code của bạn). Các style bao gồm:
-webkit-text-stroke: Tạo viền cho text với độ rộng và màu sắc được lấy từ biến.display: table: Làm cho phần tử hiển thị giống như một bảng.width: fit-content: Đặt chiều rộng của phần tử sao cho phù hợp với nội dung bên trong.text-align: center: Căn giữa text.margin: 0 auto: Đặt lề tự động để căn giữa phần tử trên trang.
-
selector .elementor-heading-title::before: Áp dụng style cho phần tử con của
selectorcó class là.elementor-heading-title, trước khi nội dung thực sự của nó được hiển thị:content: Nội dung được đặt là biến--myText.color: Màu sắc của text.position: absolute: Định vị phần tử một cách tuyệt đối.width: Bắt đầu từ 0% và sẽ thay đổi theo keyframes.height: Chiều cao tối đa.overflow: hidden: Ẩn nội dung vượt quá kích thước của phần tử.border-right: Tạo một đường viền bên phải.animation: Áp dụng animationanimateXvới thời gian và hình thức được định nghĩa bởi các biến.
-
@-webkit-keyframes và @keyframes animateX: Định nghĩa các trạng thái của animation
animateX:0%, 10%, 100%: Chiều rộng của phần tử là 0%.70%, 90%: Chiều rộng của phần tử là 100%.
Hiệu ứng cuối cùng là text sẽ xuất hiện từ trái sang phải, với màu sắc và viền được thay đổi theo thời gian, tạo ra một hiệu ứng chuyển động hấp dẫn. Đây là một cách sáng tạo để thu hút sự chú ý đến phần tử tiêu đề trên trang web của bạn.
