Làm chữ nhấp nháy bằng css animation
- @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
<html> <head></head> <body> <p class="test"> Chữ nhấp nháy</p> </body> </html>Chữ nhấp nháy và CSS
@-webkit-keyframes my { 0% { color: #F8CD0A; } 50% { color: #fff; } 100% { color: #F8CD0A; } } @-moz-keyframes my { 0% { color: #F8CD0A; } 50% { color: #fff; } 100% { color: #F8CD0A; } } @-o-keyframes my { 0% { color: #F8CD0A; } 50% { color: #fff; } 100% { color: #F8CD0A; } } @keyframes my { 0% { color: #F8CD0A; } 50% { color: #fff; } 100% { color: #F8CD0A; } } .test { background:#3d3d3d; font-size:24px; font-weight:bold; -webkit-animation: my 700ms infinite; -moz-animation: my 700ms infinite; -o-animation: my 700ms infinite; animation: my 700ms infinite; }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.
@keyframes my { 0% { color: #F8CD0A; } 50% { color: #fff; } 100% { color: #F8CD0A; } }
- 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
.test { background:#3d3d3d; font-size:24px; font-weight:bold; -webkit-animation: my 700ms infinite; -moz-animation: my 700ms infinite; -o-animation: my 700ms infinite; animation: my 700ms infinite; }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)