Làm chữ nhấp nháy bằng css animation

Bạn đang muốn làm chữ nhấp nháy, nhưng bạn không muốn dùng tới bất kỳ Javascript hay CSS hay JQUERY vì nó rất phức tạp với bạn, và cách làm bằng Blink text lại không đáp ứng được cho bạn. Hôm nay mình sẽ hướng dẫn cho các bạn cách làm chữ nhấp nháy bằng css, để làm được điều này mình sẽ làm với thuộc tính aniation của CSS3 và với sự hỗ trợ của thuộc tính @keyframes. Trong sự kết hợp này:

•  @keyframes  có nhiệm vụ điều khiển diễn biến một hoạt động của một thành phần, và cụ thể chính là điều khiển cái phần màu mè của “Chữ nhấp nháy”
• anination có nhiệm vụ làm cho “chữ nhấp nháy ” nhấp nháy

Ví Dụ: mình có một đoạn HTML Chữ nhấp nháy và CSS và kết quả sau khi có css là:

Chữ nhấp nháy

– Trong đoạn css trên bạn chỉ cần chú ý 2 thuộc tính @keyframes và animation và:

• @-moz- hỗ trợ cho firefox.
• @-webkit- hỗ trợ cho Google Chrome và Safari.

Trong đó:

• my : là tên của thuộc tính mình đặt, tên thuộc tính này được  animation sử dụng
• 0%,50%,100%: là các thuộc tính css cho từng giai đoạn, ở đây mình sử dụng thuộc tính color để đổi 2 màu trắng và cam thay đổi nhau

Và trong class ”test” bạn cho thuộc tính animation chữ trong class chuyển động theo ý bạn

• my : là tên animation, và trong trường hợp này thì glowing chính là tên thuộc tính mình đặt ở trên keyframes
• 700ms : là thời gian chuyển động (1s = 1000ms)
• infinite : để cho animation luôn chuyển động (có nghĩa là nó sẽ nhấp nháy mãi)

Vậy là bạn đã có thể tự làm chữ nhấp nháy bằng css rồi, và không chỉ chữ, bạn có thể làm điều này tương tự với những thứ khác. như button, nền…. đều có thể làm theo ý bạn. ví dụ khi cho nền nhấp nháy thì có thêm một vài thuộc tính shashow nữa thì sao nhỉ? Chúc các bạn thành công!