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

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 tin 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 tiêu 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ể 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

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