Tạo nội dung nhấp nháy gây chú ý cho website

Kiến thức về WordPress 01/10/2023 In trang này

Vừa rồi mình có hoàn thành 1 website bán hàng cho khách hàng, trong web có 1 chức năng hiển thị 1 thông báo với nội dung nhấp nháy gây chú ý ở phần header nên mình share ở bài viết này hy vọng sẽ giúp ích cho nhiều người.

Để làm được việ này khá đơn giản, chỉ cần sử dụng code css với thuộc tính animation: blinker là có thể làm được ngay.

Bắt đầu luôn nào…

Code html bạn có thể thêm vào vị trí mong muốn

<div class="ct-header-text">
   <div class="entry-content">
     <p><span>Free shipping</span> orders from all item</p>	
   </div>
</div>

Tiếp theo bạn chỉ cần thêm đoạn code css dưới đây vào file style.css hoặc bạn cũng có thể .

Nếu chưa biết thêm vào phần tuỳ biến như thế nào bạn có thể xem qua 

.ct-header-text p span {
    animation: blinker .7s infinite;
    font-weight: 600;
}

@keyframes blinker {
  50% {
    color: #ffc107;
  }
}

Nếu bạn muốn tìm hiểu thêm về css này bạn có thể tìm kiếm với từ khoá Blinking Effect with CSS3 Animations sẽ có nhiều kết quả nhé.

Critical CSS là gì? Cách tạo CSS quan trọng cho website
Fetchpriority attribute – Tính năng đáng chú ý trên WordPress 6.3
Cách kiểm tra plugin / theme tương thích với phiên bản PHP

Từ khóa
Nếu bạn thấy bài viết có ích hãy sao chép link và chia sẻ bài viết
user

Yêu thích Võ thuật và Công nghệ thông tin, thích viết và chia sẽ về 2 lĩnh vực này thế thôi :D

Bài viết liên quan