Tạo nội dung nhấp nháy gây chú ý cho website
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
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ể thêm css vào phần tuỳ biến.
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 bài viết này
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é.
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
1 2 3 4 5 |
<div class="ct-header-text"> <div class="entry-content"> <p><span>Free shipping</span> orders from all item</p> </div> </div> |
1 2 3 4 5 6 7 8 9 10 |
.ct-header-text p span { animation: blinker .7s infinite; font-weight: 600; } @keyframes blinker { 50% { color: #ffc107; } } |