Ẩn một phần tử sau thời gian nhất định bằng CSS

Khi các bạn có nhu cầu hiển thị quảng cáo hoặc 1 thông báo nào đó lên trang Web của mình nhưng muốn nó chỉ hiển thị trong thời gian cụ thể trong 5,10, 20 giây…thì các bạn có thể ứng dụng mã CSS bên dưới nhé!

Mã CSS

#hide10s {
  animation: hide10s 0s ease-in 10s;
  animation-fill-mode: forwards;
}
@keyframes hide10s {
  to {
    visibility: hidden;
    width: 0;
    height: 0;
  }  }

Thời gian ở mã trên là 10 giây, các bạn có thể tùy chỉnh theo nhu cầu. Chèn mã CSS này vào file style.css trong Theme của bạn hoặc Code thủ công cũng được nhé!

Mã HTML

<div id="hide10s"> Code quảng cáo hoặc nội dung khác....</div>

Đơn giản đúng không nào, chúc các bạn thành công!

---

Hãy cho chúng tôi một lượt hoặc chia sẻ bài viết với bạn bè của bạn. Cảm ơn vì đã ghé thăm, hãy tiếp tục ghé thăm Tradevn.tech. Xin cám ơn!

---