Loader trên dòng Text bạn muốn hiển thị, đặc biệt đoạn code vô cùng đơn giản và không phức tạp gì nhiều nhé.![[HTML] Tạo Loader Text Bằng HTML Và CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvWBylftRdxQnwe4IXmrmiG_t33H4Cwa8eIEdk_uEJ2_DKMur5Hqypu5JSJZsmxDbwh3aSHmfRezyHwFnyOly9v1PLfMBIj6qltwGUsXCIALxv4mvC7E9rwfFX16ko5aoC6N5G5bmjLvAnoeEOrnj97WB_n-rLfVL6LXEm6215Cc7a2ABmX0OcYvh6zU/s1330/LOADER%20TEXT-PNG.png "[HTML] Tạo Loader Text Bằng HTML Và CSS")
Xin chào các bạn, trong hướng dẫn này tôi sẽ tạo hiệu ứng tải đơn giản bằng văn bản. Vì vậy, chương trình này sẽ hiển thị một từ với độ mờ ít rõ hơn và dần dần trở nên rõ ràng hơn cho đến khi từ được viết xuất hiện rõ ràng.
Đầu tiên, tạo một thư mục dự án và thêm các tệp
index.html và style.css vào đó. Khi hoàn tất, hãy mở tệp index.html và nhập mã sau.<!DOCTYPE html>
< html lang = "en" >
<head>
< meta charset = "UTF-8" >
<meta name= "viewport" content= "width=device-width, initial-scale=1.0" >
<meta http-equiv= "X-UA-Compatible" content= "ie=edge" >
<title> Văn bản tải </title>
<link rel= "stylesheet" href= "style.css" >
</head>
<body>
<h1 data-text= "Hung Programmer Viet Nam" > Hung Programmer Viet Nam </h1>
</body>
</html>
Tiếp theo, mở
style.css và nhập mã saubody
{
margin: 0;
padding: 0;
font-family:sans-serif;
}
h1{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
font-size: 120px;
padding: 0;
text-transform: uppercase;
letter-spacing: 5px;
color: #f5ebebf1;
}
h1:before{
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color: crimson;
overflow: hidden;
animation: animate 10s linear infinite;
border-right: 1px solid #000;
}
@keyframes animate{
0%{
width: 0;
}
50%{
width:100%;
}
100%{
width:0;
}
}Như vậy đã hoàn thành, chúc các ban thành công và trang trái giao diện blog thật tuyệt với.