Chào các bạn, bài viết này mình sẽ hướng dẫn các bạn tạo
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
Tiếp theo, mở
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.
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é.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.
![[HTML] Tạo Loader Text Bằng HTML Và CSS [HTML] Tạo Loader Text Bằng HTML Và CSS](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzvWBylftRdxQnwe4IXmrmiG_t33H4Cwa8eIEdk_uEJ2_DKMur5Hqypu5JSJZsmxDbwh3aSHmfRezyHwFnyOly9v1PLfMBIj6qltwGUsXCIALxv4mvC7E9rwfFX16ko5aoC6N5G5bmjLvAnoeEOrnj97WB_n-rLfVL6LXEm6215Cc7a2ABmX0OcYvh6zU/w640-h357-rw/LOADER%20TEXT-PNG.png)
thủ thuật hay đó a
ردحذف(y)
حذفإرسال تعليق
✔ Bình luận có dấu, lịch sự và đúng chủ đề
❌ Không spam link, quảng cáo, từ ngữ phản cảm
❌ Không hỏi link tải, crack, nội dung vi phạm
⚠ Bình luận vi phạm sẽ bị xóa mà không báo trước
Thêm hình ảnh: [img] link hình ảnh [/img]
Thêm video youtube: [youtube] link video [/youtube]
Thêm code: [code] Đoạn code đã mã hóa [/code]