[HTML] Tạo Loader Text Bằng HTML Và CSS

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 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

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.htmlstyle.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ã sau
body
{
    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.

DEMO TIPS

2 تعليقات

✔ 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]

إرسال تعليق

✔ 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]

أحدث أقدم