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:
Chữ nhấp nháy
và CSS
và kết quả sau khi có css là:
Và trong class ”test” bạn cho thuộc tính animation chữ trong class chuyển động theo ý bạn
- @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
|
1 2 3 4 5 6 |
<html> <head></head> <body> <p class="test"> Chữ nhấp nháy</p> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
@-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; } |
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.
|
1 2 3 4 5 |
@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
|
1 2 3 4 5 6 7 8 9 |
.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; } |
- 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)
