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

By Sơn Thanh Hướng dẫn thiết kế web, Hướng Dẫn Wordpress, Tư vấn Website 0 Comments

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

<html>
<head></head>
<body>
<p class="test"> Chữ nhấp nháy</p>
</body>
</html>

<html>

<body>

</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;
}

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

Trong đó:

@keyframes my { 
	 0% { color: #F8CD0A;  } 
	 50% { color: #fff;  }
	 100% { color: #F8CD0A;  } 
 }

@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;
}

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

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!