Làm chữ nhấp nháy css animation
HTML
<html>
<head></head>
<body>
< div class="text-pr text-fl >
< a class="text-1" href="/blog" > Xem < span class="off-fl" > Th < /span > êm < /a >
< /div >
</body>
</html>
CSS
.text-fl a{
color: #d93337;
font-size:6em;
letter-spacing:10px; //Khoảng cách các chữ cái
animation: text-flicker 4s linear infinite; //animation này kếp hợp vs @keyframe
}
#off-fl
animation: letter-flicker 2s linear infinite;//animation này kếp hợp vs @keyframe
}
@keyframes text-flicker {
0% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
2% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
8% {
opacity:0.1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
9% {
opacity:1;
text-shadow: 0px 0px 29px rgba(242, 22, 22, 1);
}
12% {
opacity:0.1;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
20% {
opacity:1;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
25% {
opacity:0.3;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
30% {
opacity:1;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
70% {
opacity:0.7;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
72% {
opacity:0.2;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
77% {
opacity:0.9;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
100% {
opacity:0.9;
text-shadow: 0px 0px rgba(242, 22, 22, 1);
}
}
Lưu ý:
@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 phần màu sắc của chữ "xem thêm"
anination có nhiệm vụ làm cho “xem thêm ” nhấp nháy
0%, 2%, 8% ... 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 opacity để làm chữ lúc ẩn lúc hiện
text-flicker : 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
4s: là thời gian chuyển động (1s = 1000ms)
linear chuyển động cùng 1 tốc độ từ đầu đến cuối
infinite : để cho animation luôn chuyển động (có nghĩa là nó sẽ nhấp nháy mãi)
